微信小程序之canvas画图

开题

前几天接到个需求，长按图片保存到相册，该图片上有用户头像和昵称以及对应的二维码；那这就不能直接当作图片来操作了，要先把整体图片画出来；我当时用的是canvas。效果图如下：

canvas drawImage

用canvas画图主要使用dramImage API，不太清楚的同学可以区MDN看看：developer.mozilla.org/zh-CN/docs/…

主要是用到图片URL，相对于左上角的x，y坐标以及image在canvas上绘制的宽高。

开始画图

那我们开始行动了，先在html上写个canvas标签：

<canvascanvas-id="shareCanvas"class="canvas"bindlongpress="saveImg"catchtouchmove="true"style="height: {{canvasHeight + 'rpx'}};width: {{canvasWidth + 'rpx'}};">
</canvas>
复制代码

在微信小程序上画图先要把图片路径保存到本地，这里我们可以使用wx.getImageInfo或者wx.downloadFile将图片转为本地。考虑到我们要操作多个图片，这里对这些API进行封装：

getImageInfo(src) {return new Promise((resolve, reject) => {wx.getImageInfo({src,success: (res) => resolve(res),fail: (res) => reject(res)})});
}
复制代码

如果你要使用downloadFile也可以，封装方法和上面一样。封装好了那么我们可以开始画图了，这里需要三张图片，对应的代码如下：

Promise.all([this.getImageInfo('https://cyt-resource.oss-cn-shanghai.aliyuncs.com/wximg/qrcode_bg.jpg'),this.getImageInfo(this.data.userInfo.avatarUrl),this.getImageInfo(this.data.qrCodeUrl)]).then((res) => {const ctx = wx.createCanvasContext('shareCanvas');ctx.drawImage(res[0].path, 0, 0, 图片宽度, 图片高度);ctx.fillStyle = 'rgb(168, 88, 126)'; // 字体颜色ctx.setFontSize(12); // 字体大小ctx.fillText(this.data.userInfo.nickname, 相对于左上角的x坐标, 相对于左上角的y坐标);ctx.drawImage(res[1].path, x坐标, y坐标, 宽, 高);ctx.drawImage(res[2].path, x, y, width, height);ctx.draw();this.setData({isDrawnImg: true});}).catch((e) => {});
复制代码

在这里要说个需要注意的坑，将图片保存到本地需要在小程序后台的downloadFile域名配置里配置好对应的域名，一个都不能落，比如微信头像需要在downloadFile合法域名配置里加入https://wx.qlogo.cn；另外需要提醒大家，在微信开发者工具里调试的话尽量不要开不校验合法域名那个选项，即

不然就会出现在调试模式下都是好的，但是真机不开调试就没有效果了。而且不好排查错误。

优化

由于canvas画图需要时间，那我们可以在等待时加个loading效果，在生成或者失败时隐藏loading，失败时还需要提示

wx.showLoading({title: '图片生成中...'
});
wx.hideLoading();
wx.showToast({title: '图片生成失败'
});
复制代码

保存图片到相册

这里使用canvasToTempFilePath API，代码如下：

saveImg () {wx.canvasToTempFilePath({canvasId: 'shareCanvas',success: (res) => {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: (res) => {wx.showToast({title: '保存成功'});},fail: (res) => {this.authorizeToWritePhotosAlbum();}})}})
},
复制代码

这里有个失败时候的操作，主要是因为取消授权后就不能使用了，这里要给个提示，让用户可以再次选择授权进行图片保存，方法如下：

// 授权保存图片至相册
authorizeToWritePhotosAlbum () {wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: (res) => {wx.openSetting({success: (res) => {if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功，再次点击图片即可保存',showCancel: false,});} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',showCancel: false,});}}})}});
},
复制代码

至此，画图以及保存到相册的问题都有解决了。那么如果我们需要适配呢，图片需要自适应。在微信小程序我们可以使用rpx进行自适应：可以看看文档 developers.weixin.qq.com/miniprogram…

自适应

因为drawImage里面的单位都是px，且不能更改，那我们应该怎么进行自适应。可以根据设置的 设备屏幕/750*自己设置的自适应宽度（单位为rpx），比如设置宽度为600rpx，那么在drawImage里就是设备屏幕/750*600；要获取屏幕高度直接调用wx.getSystemInfo就行了，取返回结果的screenWidth；文字大小，小图片的x，y坐标都可以通过这个方法进行自适应。

结题

我当时主要是域名配置忘了，坑了自己，然后就是授权问题（关闭后无法保存，自己懵了，没考虑到）；希望大家都能注意下，写的不好的地方希望大家提出来，一大早写的比较匆忙，?