因为 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 }) } })},