var that = this;
// 绘制背景海报到canvas
var postersize = this.setCanvasSize(750);//动态设置画布大小
const ctx = wx.createCanvasContext('shareCanvas')
ctx.drawImage(that.data.imgUrl, 0, 0, postersize.w, postersize.h)
console.log("海报图片路径"+that.data.imgUrl);
ctx.draw();
//生成二维码
qrcode({
height:80,
width:80,
canvasId:"myQrcode",
text:'{"ticketCode":"111"}',
colorDark: "black",
colorLight: "white",
callback: (res) => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
x:0,
y:0,
width: 80,
height: 80,
success: (e) => {
that.setData({ qrcodePath: e.tempFilePath });
var res = wx.getSystemInfoSync();
var scale = 750 / 180;
var width = res.windowWidth / scale;
var height = width
var leftscale = 750 / 480; // 180为left
var left = res.windowWidth / leftscale;
var topscale = 750 / 880; // 180为top
var top = res.windowWidth / topscale;
ctx.drawImage(that.data.qrcodePath, left, top, width, height)
ctx.draw(that);
//生成二维码
setTimeout(() => {
//获取临时缓存code照片路径,存入data中
console.log("二维码照片路径"+that.data.qrcodePath);
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function(res) {
console.log("开始展示图片");
},
fail:function(res){
console.log("失败");
},
complete:function(res){
console.log("调用接口结束")
}
})
},0)
}
})
}, 0);
}
});
<view class="bg">
<canvas canvas-id="shareCanvas" class="canvas" />
<image wx:if="{{img}}" src="{{img}}" class="img" bindtap="previewImg"></image>
</view>
<view class="canvas-box">
<canvas canvas-id="myQrcode"/>
</view>
你好,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html