便于理解 现在拆分来一步步的看
点击保存按钮之后
第一步 定义出来画布的位置在一个看不见的位置
第二步 根据getImageInfo方法定义位置尺寸 大小 贴上图片
关键在于定时器的先后顺序 先铺设背景图 再在背景图上贴上自己需要的元素 这里需要用上定时器 保证图片层级在这里插入代码片
关系的先后顺序,
下面展示一些 内联代码片
。
```javascript
``SaveCard:function(){
var that = this
const ctx = wx.createCanvasContext('share');
that.setData({
loadingHidden: false
})
wx.getImageInfo({
src: that.data.activeimage,
success: function (res){
ctx.drawImage(res.path,0,0,375,812);
ctx.setFontSize(18)
ctx.fillStyle = '#f8e6b2'
ctx.fillText(that.data.nickName,76,125)
wx.getImageInfo({
src: that.data.avatarUrl,
success: function (res){
ctx.save()
ctx.beginPath()
ctx.arc(48,118,20,0,2*Math.PI)
ctx.clip()
ctx.drawImage(res.path, 28,98,40,40);
ctx.restore()
setTimeout(function(){
ctx.draw(false, function () {
that.setData({
loadingHidden: true
})
wx.canvasToTempFilePath({
canvasId: 'share',
success: function success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存图片成功!',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败!',
})
}
})
},
fail: function (e) {}
});
})
},1000)
}
})
that.setData({
loadingHidden: false
})
}
})
that.setData({
loadingHidden: true
})
},