// html
<view @click="downloadPic">保存二维码</view>
<view style="position: absolute; top: 0; left: 0; z-index: -1;">
// 设置canvasid
<canvas style="width: 670rpx; height: 1070rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
</view>
downloadPic() {
let that = this![在这里插入图片描述](https://img-blog.csdnimg.cn/a0b9205798bf439f90db2112cc12fa77.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YW355uW5py66L2m55S3,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
let bigImg = '/static/index/downPic.png'
var ctx = uni.createCanvasContext("firstCanvas");
ctx.drawImage(bigImg, 0, 0, uni.upx2px(670), uni.upx2px(1070));
ctx.drawImage(that.ewmCode, uni.upx2px(106), uni.upx2px(358), uni.upx2px(460), uni.upx2px(460));
if (this.num) {
ctx.setFontSize(30)
ctx.setFillStyle('#fff')
ctx.fillText('积分' + " " + " " + " " + this.num, uni.upx2px(200), uni.upx2px(990));
}
ctx.draw();
uni.showToast({
icon: 'none',
position: 'bottom',
title: "海报生成中~",
})
setTimeout(function() {
uni.canvasToTempFilePath({
fileType: "jpg",
canvasId: 'firstCanvas',
X: 0,
y: 0,
width: uni.upx2px(670),
height: uni.upx2px(1070),
success: function(res) {
console.log(res.tempFilePath)
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
icon: 'none',
position: 'bottom',
title: "图片已下载至【图库】,请打开【图库】查看",
});
}
});
}
})
}, 1000)
},
保存至手机效果图