不爱看废话的朋友，可以直接看图下方的文字和注意事项。那没问题。
应用场景：
在项目中，每个用户都会生成自己的小程序代码。当用户扫描小程序代码时，用户将默认成为您的好友。邀请好友领红包】，扫描二维码确认绑定关系。（不用管我为什么放这张图，因为我姐昨天刚发给我，让我给她扫一下。栗子在这里感觉会清楚一点，如果有一点广告嫌疑我可以忽略哈哈哈）。
在小程序中，我们可以生成带参数的小程序代码，但是这个小程序代码是小程序代码的图片。如果要和产品放在同一张图上，前端不会做，后端会做。反正总得有人去做，然后，决定让前端去做。好的，开始行动并开始工作。
结合文档和度娘，发现可以用它来实现，发现可以用两个功能来实现。. 画出你想画的图
wx。将画布的内容输出为图片
实际效果：
根据需要在指定位置绘制两张独立的图片，合成一张图片，保存到相册。
预防措施：
CanvasContext.drawImage (, dx, dy)
(, dx, dy, , )
(, sx, sy, , , dx, dy, , ) 自 1.9.0 起支持
, 绘制图像的路径必须是本地图像。如果是网络图片，wx. 必须用于获取本地图片的缓存，然后绘制。
dx和dy图片的位置，画布左上角为原点（0,0）。注意画布坐标的原点不是基于手机屏幕的。
,画出图片的宽度和高度，也就是你要画多大的图片。如果要绘制原图，可以通过wx.获取图片的尺寸信息，直接绘制即可。
特别注意，dx, dy, , in 。都是像素px，所以不要用rpx！！（我踩过的坑）
wx。
对于这个功能，我的理解是手机截图就是画布的内容。画布和它一样大。好吧，说到这里，你应该知道如何控制底图的大小，没有任何多余的白色边框就完美了。.
代码：
可以直接使用的代码，不过还是建议自己写，写的过程中说不定还会发现其他有趣的问题。
// 保存图片到相册
savePhoto: function(index) {
let that = this
let imgs = that.data.imgs
if (imgs[index].isDownLoad) {
// 如果已经下载过 提示用户
wx.showToast({
title: '你已经下载过该图片',
icon: 'none'
})
return
} else {
// 提示用户正在合成，否则用户可能有不当操作或者以为手机卡死
wx.showLoading({
title: '合成中......',
mask: true
})
// 创建画布对象
const ctx = wx.createCanvasContext("myCanvas", that)
// 获取图片信息，要按照原图来绘制，否则图片会变形
wx.getImageInfo({
src: that.data.imgs[index].img,
success: function(res) {
// 根据 图片的大小 绘制底图 的大小
console.log(" 绘制底图 的图片信息》》》", res)
let imgW = res.width
let imgH = res.height
let imgPath = res.path
that.setData({
canvasHeight: imgH,
canvasWidth: imgW
})
// 绘制底图 用原图的宽高比绘制
ctx.drawImage(imgPath, 0, 0, imgW, imgH)
wx.getImageInfo({
src: that.data.codeImg, // 二维码图片的路径
success: function(res) {
console.log(" 绘制二维码》》》", res)
// 绘制二维码
ctx.drawImage(res.path, 50, imgH - 380, 300, 300)
ctx.draw()
wx.showLoading({
title: '正在保存',
mask: true
})
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
console.log("合成的带有小程序码的图片success》》》", res)
let tempFilePath = res.tempFilePath
// 保存到相册
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
// 修改下载状态
imgs[index].isDownLoad = true
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '图片保存成功，可在相册中查看',
showCancel: false,
success(res) {
wx.clear
if (res.confirm) {
that.setData({
isShow: true
})
}
}
})
that.setData({
imgs: imgs,
})
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '图片保存失败，请重试',
showCancel: false
})
}
})
console.log("合成的带有小程序码的图片的信息》》》", res)
},
fail: function(res) {
console.log("生成的图拍呢 失败 fail fail fail ", res)
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '小程序码图片合成失败，请重试',
showCancel: false
})
}
}, that)
},1500)
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '二维码获取失败，请重试',
showCancel: false
})
}
})
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '图片信息获取失败，请重试',
showCancel: false
})
}
})
}
},wxml:
json
禁用页面滑动
““：真的
真是良心，xml也贴出来。这是因为我想直接保存它，而不是向用户展示绘图过程。如果你能在那里预览就完美了，而且你不需要隐藏绘图过程。
有点扭曲
需要：
用户看到的是没有二维码的缩略图。当用户点击时，会进行下载操作，将包含二维码的原图保存到手机相册中。用户看不到绘图过程。
解决方案：
原始处理用于控制显示和隐藏。因为原图比较大，会出现页面滑动和大量空白页的问题，可能无法绘制图片，有时小程序会意外退出。
后来我直接用一个视图和一个缩略图占据了全屏，然后在看不到的地方画了原图和二维码，画完后保存。
问题：
IOS：：失败。:”:失败没有图像”
：：失败。：“：失败 ”
这个问题是由于使用了属性导致绘制失败。它最初是用来隐藏绘图过程的。前期没有问题。后来绘图失败，合成的图片无法保存，甚至小程序意外退出。因此，在离屏绘图时，禁用屏幕滑动以隐藏绘图过程。
另一个需要注意的问题是在线图片合成，当点击图片时，会被保存。如果用户连续点击多次，就会卡住退出。因为原图是画出来的，比较大，所以画的时候没法控制。多次下载图纸。可以用变量来控制。
IOS保存多张图片时会出现内存不足小程序退出，因为在绘制过程中会先缓存图片再绘制。图片太多的时候会出现这种情况在线图片合成，需要在微信>商店里设置====>缓存清缓存再存储。
好吧，像往常一样，给自己写一句话，好好爱自己。
