1. 设置 canvas 组件的属性
- 绑定 key，并每次都修改该 key。这样保证每次画图都是在新的空白背景上画图，否则下次就是在上次结果上画图，从而导致出现问题。
- style 中指定幕布的宽高为真实需要输出的图片的宽与高，否则会导致图片伸缩。
<canvas
:key="canvasKey"
canvas-id="hiddenCanvasShare"
class="canvas-share-hidden"
style="width:750px;height:900px;">
</canvas>
2. 用 fixed定位，将canvas 组件隐藏
- left 设置为9999px，远超出屏幕，达到隐藏的目的。
- z-index 保证不被 loading 之类组件覆盖。
.canvas-share-hidden {
position: fixed;
top: 0;
left: 9999px;
z-index: 999;
}
3. 绘制图片
- 需要将图片下载下来存到本地，并使用本地地址 xxTmpPath
- ctx.drawImg 的第一个参数即为xxTmpPath
- 绘制裁剪图形: 用 arc 和 clip 方法裁剪形状，用 save, restore 方法使接下来的操作仅限于被裁剪的形状之内，而不会影响之后的其他操作。
ctx.save()
let headImageSize = 50
let halfImageSize = headImageSize / 2
ctx.arc(rpx(50 + halfImageSize, scale), rpx(130 + halfImageSize, scale), rpx(halfImageSize, scale), 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(headImgPath, rpx(50, scale), rpx(130, scale), rpx(headImageSize, scale), rpx(headImageSize, scale))
ctx.restore()
4. 输出图片
在 draw 的回调里面保存图片到临时文件，再将临时文件保存到相册
ctx.draw(false, () => {
timer.logTime('draw image finished')
wx.canvasToTempFilePath({
canvasId: canvasId,
success: function (res) {
timer.logTime('canvasToTempFilePath')
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res1 => {
timer.logTime('saveImageToPhotosAlbum')
success(res.tempFilePath)
},
fail: e => {
console.error(e)
fail()
}
})
},
fail: function (res) {
console.error(res)
fail()
}
})
})
