需求:
做一个类似下图的功能。图片内容是动态的,用canvas画出来,生成临时图片,再保存。
实现:
<view class="canvasBox"><canvas canvas-id="myCanvas" class="myCanvas"></canvas>
</view><view class="groupBtn" ><van-button type="default" bind:click="saveImage">保存图片</van-button>
</view>
ImageDraw(){// 通过canvasAPI绘制 参考canvas文档使用const ctx = wx.createCanvasContext('myCanvas');//绘制背景图 图片地址可以使网络地址、本地地址ctx.drawImage('../../images/invite.png', 0, 0, 320, 475);ctx.save();//绘制背景图上二维码ctx.fillStyle="#FFFFFF";ctx.fillRect(110, 327, 104, 104 );ctx.lineCap="round";ctx.clip();ctx.drawImage('../../images/image14.png', 113, 330, 98, 98);ctx.restore();ctx.stroke()ctx.draw()},//保存群图片saveImage(){//生成临时图片wx.canvasToTempFilePath({canvasId: 'myCanvas',width: 320,height: 475,success: function (res) {//tempFilePath为生成的临时地址console.log(res.tempFilePath,'saveImageToPhotosAlbum')//保存到相册wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success(res) {wx.showToast({title:'保存成功'})},fail(err){wx.showToast({title:err.errMsg})}})}, fail: function(err) {wx.showToast({title:err.errMsg})}})},
其他使用,查看微信开发文档