微信小程序通过canvas生成图片并保存到本地

前言

需求场景&＃xff1a;我们知道&＃xff0c;微信小程序可以分享给好友或者微信群&＃xff0c;不能分享到朋友圈&＃xff0c;那分享到朋友圈就需要特殊处理一下&＃xff0c;这里我们把小程序和canvas结合起来使用&＃xff0c;生成自定义图片并保存到本地。

代码

wxml文件

js文件

通过canvasAPI绘制

const ctx &＃61; wx.createCanvasContext(&＃39;myCanvas&＃39;); //绘制背景图 ctx.drawImage(res.path, 0, 0, screenWidth, 500); //绘制背景图上层的头像 ctx.save(); ctx.arc(100, 100, 30, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(avatarUrl, 50, 50, 110, 110);//根据微信getUserInfo接口获取到用户头像 ctx.restore(); //绘制文字 ctx.setTextAlign(&＃39;center&＃39;) ctx.setFillStyle(&＃39;#fff&＃39;) ctx.setFontSize(16) ctx.fillText(userInfo.nickName, 100, 180)//用户昵称 ctx.stroke() ctx.draw()

通过wx.canvasToTempFilePath获取本地路径

wx.canvasToTempFilePath({x: 0,y: 0,width: 300,height: 500,canvasId: &＃39;myCanvas&＃39;,success: function (res) {console.log(res.tempFilePath);} })

通过wx.saveImageToPhotosAlbum保存图片到本地

wx.saveImageToPhotosAlbum({filePath: tempFilePath,//canvasToTempFilePath返回的tempFilePathsuccess: (res) &＃61;> {console.log(res)},fail: (err) &＃61;> {} })

简单的效果图

总结

canvas的drawImage方法只支持本地图片&＃xff0c;不支持网络图片&＃xff0c;所以头像和背景图我都用getImageInfo这个方法转了一下。
通过userInfo获取的头像是正方形的&＃xff0c;不是需求中的圆形&＃xff0c;这里用到了clip()方法&＃xff0c;需要配合save()和restore(),因为裁剪之后如果不恢复&＃xff0c;接下来的绘制都会在那个小区域里面。
此次demo没有使用生成二维码的api&＃xff0c;有兴趣的朋友们可以搞一下。此处是链接