示例图:动态渲染的有: 1.大背景图;2. 二维码;3. 邀请码
<view class="popupBtn" @click="savebtn">
保存至相册
</view>
<canvas class="canvas" canvas-id="canvas"
style="position:fixed;left:9999px;width: 100%;height:746upx;;zoom: 0.8;"></canvas>
methods: {
savebtn() {
let that = this;
let ctx = uni.createCanvasContext('canvas', this);
ctx.setFillStyle('#fff'); //canvas背景颜色
ctx.fillRect(0, 0, 280, 373); //canvas画布大小
uni.getImageInfo({
src: '/static/imgs/my/tan.png', //大背景图
success: function(res) {
ctx.save();
ctx.beginPath();
console.log(res);
ctx.drawImage(res.path, 0, 0, 280, 373);
ctx.restore();
ctx.save();
ctx.restore();
ctx.setFontSize(12);
ctx.setFillStyle("#999999");
ctx.setTextAlign('center');
ctx.fillText(that.invite_code, 185, 289);
ctx.beginPath();
console.log(that.codeimg); //二维码
ctx.drawImage(that.codeimg, 103.5, 106,
73, 73);
ctx.draw(false, () => {
// 下载操作
uni.canvasToTempFilePath({
width: 280,
height: 373,
canvasId: 'canvas',
success: function(res) {
// console.log(res.tempFilePath);
// 除了H5 操作
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
uni.showToast({
title: '保存成功',
icon: 'none'
})
},
fail(err) {
uni.showToast({
title: '保存失败',
icon: 'none'
})
console.log('err', err);
}
});
// #endif
// #ifdef H5
var arr = res.tempFilePath.split(',');
var bytes = atob(arr[1]);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ab], {
type: 'application/octet-stream'
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = new Date().valueOf() + ".png";
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0,
0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
// #endif
},
fail: function(res) {
uni.showToast({
title: '保存失败',
icon: 'none'
})
console.log(res);
}
}, this);
});
},
fail(err) {
errs(err);
}
});
},
}