小程序canvas生成图片、html转图片，保存相册、分享朋友圈。

业务场景

生成一个由背景图片、文字、icon、二维码组合的图片，保存至本地相册。由于生成的二维码为支付二维码切真实存在，这里做了马赛克处理。不是我canvas生成上去的吼。

实现思路：定义一个canvas，然后将他隐藏。生成了二维码后点击保存二维码时在canvas中绘制图形，然后调用canvasToTempFilePath方法把当前画布内容导出成指定大小的图片，返回图片路径，然后调用saveImageToPhotosAlbum将图片保存到本地。完成操作。

前端代码： （只展示了canvas和保存二维码的前端代码，其中页面显示的图像是html语言，并不是canvas）

js代码： canvasHidden:true控制canvas隐藏。

[code]  data: {
canvasHidden:true
},

保存二维码按钮的函数：

[code]	hidePayLayer(e){
var codeimgs = this.data.codeimgs  //生成的二维码图像
const ctx = wx.createCanvasContext('share'); //获取到canvas实例
ctx.drawImage('/img/fuwu/code_bg.png',0,0,328,468) //将背景图片绘制在画布上
ctx.drawImage(codeimgs,	68, 132, 192, 192) //将二维码图片绘制在画布上
ctx.draw()  //保存修改

wx.canvasToTempFilePath({
canvasId: 'share', //通过id 指定是哪个canvas
success(res) {
wx.saveImageToPhotosAlbum({  　//成功之后保存到本地

filePath: res.tempFilePath, //生成的图片的本地路径
success: function (res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function (res) {

}
})
}
})
},

这样我们就通过canvas组合了一张图片，需要注意的是，我这里图省事，让ui将整个页面不变的元素都做成了一整张背景图，然后页面还是用html来写，最后生成时只用将背景图和二维码绘制在一起就行了。

如果您的页面复杂且生成的元素变化很多，可以在下图的位置自己绘制，具体可参照小程序canvas文档。

很简陋的一个实现方案，大家贱笑了。