不喜欢看废话的小伙伴，可以直接看图片下面的文字和注意事项 实现是没问题的。
应用场景：
项目中，每个用户都会生成自己专属的小程序码，当用户扫描这个小程序码的时候，默认这个用户就会成为你的好友，，嗯，举个身边的例子，比如现在最火的 [邀好友领红包]，通过扫描二维码确定绑定关系。（不要纠结为啥放这张图片，因为刚好昨天我妹妹发我，让我给她扫一扫，🌰栗子放在这里 感觉会更加清楚一点，有点广告嫌疑 哈哈哈哈 可以忽略 ）。
在小程序中，我们可以生成带参的小程序码，但是呢，这个小程序码是一张小程序码图片，如果想要和产品放在一张图上，前端不做，后端做，反正总要有人做，然后，，决定让前端来做。ok，动起来，开始干。
image.png
结合文档和度娘，发现可以用canvas来实现，发现用两个函数就可以搞定， CanvasContext.drawImage 画出你想画的图片
wx.canvasToTempFilePath 把画布的内容输出为图片
实际效果：
两张独立的图片，根据需要绘制在指定位置，合成一张图片，并保存到相册。
image.png
注意事项：
CanvasContext.drawImage
drawImage(imageResource, dx, dy)
drawImage(imageResource, dx, dy, dWidth, dHeight)
drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从1.9.0 起支持
imageResource,绘制的图片的路径，必须是本地图片，如果是网络图片，必须用wx.downloadFile获取本地图片的缓存后再绘制。
dx、dy图片的位置，画布左上角为原点(0,0),注意是画布的坐标原点而不是以手机屏幕为准。
dWidth, dHeight 绘制图片的宽高，即你想把这张图片画多大，如果想要绘制原图，则通过 wx.getImageInfo获取图片的尺寸信息，直接进行绘制就可以了。
特别注意，CanvasContext.drawImage中的dx, dy, dWidth, dHeight都是以像素px为单位的，所以不要用 rpx ！！（我踩过的坑）
wx.canvasToTempFilePath
对这个函数，我的理解就是 手机截屏，截的是画布中的内容，画布多大它就多大，嗯，说到这，你应该就知道怎么控制底图大小，然后还很完美没有多余的白边。
代码：
可以直接用的代码，不过还是建议自己写下，也许写的过程还会发现其他有趣的问题呢。
// 保存图片到相册
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:
<view class="placeHoder"></view>
<canvas style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;" canvas-id="myCanvas" />
json
禁止页面滑动
"disableScroll":true
真良心，xml也给贴出来啦。isShow 是因为我想直接保存，不给用户看到绘制的过程，如果你那里可以预览的话，简直完美，不需要隐藏绘制过程。
一点曲折
需求：
用户看到的是一张不包含二维码的缩略图，当用户点击之后 会执行下载操作，把包含二维码的原图保存到手机相册中，用户不能看到绘制过程，
解决思路：
原先的处理是 用hidden来控制canvas的显示隐藏，由于原图比较大 所以会出现页面滑动出现大量空白页面的问题，并且 有可能绘制不出图片，有时候会出现小程序意外退出的问题。
后来 我这里直接 用一个view和缩略图占据全屏，然后 在看不到的地方绘制原图和二维码，绘制完成后进行保存。
问题：
IOS: canvasToTempFilePath:fail. errMsg:"canvasToTempFilePath:fail no image"
Android:canvasToTempFilePath:fail. errMsg:"canvasToTempFilePath:fail create bitmap failed"
这个问题 是由于对canvas 用了hidden 属性，导致绘图失败，本来是打算用用hidden来隐藏绘制过程的，前期没有问题，后来出现绘制失败 无法保存合成的图片，甚至小程序意外退出的情况，因此，canvas绘制在屏幕外，禁止屏幕滑动来隐藏绘制过程。
另外一个需要注意的问题是 当点击图片的时候会进行保存，如果用户连续点击多次则会出现卡死退出的情况，因为绘制的是原图，比较大，所以当正在绘制的时候要控制不能多次下载绘制。可以用一个变量来控制。
IOS 保存多张图片的时候会出现内存不足，小程序退出的情况，因为在绘制过程中会先缓存图片然后进行绘制，当图片过多的时候会出现这种情况，需要在微信中 设置==> 存储 ==> 缓存 清除缓存 再次进行存储。
嗯，惯例，写给自己一句话，好好爱自己呀。
网友评论