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

微信小程序可以分享给好友或者微信群，但不能分享到朋友圈。分享到朋友圈需要特殊对待。这里我们将小部件与 Use canvas 结合起来生成自定义图像并存储在本地。

代码

• wxml文件

<view>
    <button type="default" size="defaultSize" bindtap="exportImg">生成图片</button>
</view>
<canvas canvas-id="myCanvas"></canvas>
复制代码

• js文件

通过canvasAPI绘制

const ctx = wx.createCanvasContext('myCanvas');
//绘制背景图
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('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(16)
ctx.fillText(userInfo.nickName, 100, 180)//用户昵称
ctx.stroke()
ctx.draw()
复制代码

通过wx.canvasToTempFilePath获取本地♸w x.saveImageToPhotosAlbum保存图片到本地简单渲染

1. canvass drawImage方法仅支持本地图像，av方法仅支持网络图像和av❙背景图像getImageInfo此方法略有更改。
2. 通过userInfo获取到的头像是正方形的，不是要求的圆形。这里使用了clip()方法，必须与save()和restore( )配合使用，或者在裁剪之后，或者在下一次绘制之后小领土。
3. 本演示不使用API​​生成二维码。有兴趣的朋友可以尝试一下。

作者：真实__隔壁老肥兔
链接：https://juejin.im/post/5b9a3113f265da0aaa04fffc


商业转载请联系作者审批。非商业转载请注明出处。