因为 CanvasContext wx.createCanvasContext 进行保护,

导致微信小程序压缩图片性能提醒报错
小程序开发所应用的性能为了避免出现谬误,首先通过wx.getImageInfo获取图片信息,之后通过wx.createOffscreenCanvas生成画布,最初生成图片,获取到图片的base64格局地址,通过wx.uploadFile上传后盾。具体代码如下


wxml文件内容

<button class="head-img" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">    <image class="avatar" src="{{avatarUrl}}"></image></button> <canvas canvas-id="canvas" id="mycanvas" type="2d" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>

js文件内容

/** * 抉择头像 */onChooseAvatar(e) {    const that = this    let avatarUrl = e.detail.avatarUrl    that.compressImage(avatarUrl, 100)},/** * 压缩图片 * imageUrl: 图片地址 * width:压缩后的图片宽度 */compressImage(imageUrl, width) {    const that = this;    wx.getImageInfo({        src: imageUrl,        success: res => {            const height = res.height * width / res.width;            const offscreenCanvas = wx.createOffscreenCanvas({                type: '2d',                width,                height            })            const context = offscreenCanvas.getContext('2d')            const image = offscreenCanvas.createImage()            image.src = imageUrl;            image.onload = () => {                context.clearRect(0, 0, width, height)                context.drawImage(image, 0, 0, width, height)                const imageBase64 = offscreenCanvas.toDataURL("image/jpeg", 0.7)                const base64 = imageBase64.replace(/^data:image\/\w+;base64,/, "")                that.uploadPic(imageUrl, base64)            }        }    })},/** * 上传图片  */uploadPic(imgData, base64) {    const that = this;    //调用接口上传图片    let openId = wx.getStorageSync('userOpenid')    wx.uploadFile({        url: "https://xxx.xxx.com/upload", // 这里换成你们后端的上传接口即可        method: 'POST',        filePath: imgData,        name: 'file',        formData: {            'content': base64   //这里传base64类型        },        // 胜利回调        success: (res) => {            console.log(res)            let result = JSON.parse(res.data); // JSON.parse()办法是将JSON格局字符串转换为JSON对象            let newAvatarUrl = result.data; // 返回的图片url            // 将返回的url替换调默认的url,渲染在页面上            that.setData({                avatarUrl: newAvatarUrl            })        }    })},