canvasToTempFilePath绘制图片到画布上(有背景图和小程序码以及显示文案),小程序码 真机不显示,开发工具显示,
真机返回的是:wxfile://tmp_ef7d896c70dbbba1bedbb50c83f6ee1f.png
开发工具返回的是:http://tmp/wxd09bd3b7e8615d34.o6zAJs1nxb9ingS3FdkyhKJfJIrw.i3SPftwNzzsf83942aacac4a02fd6228083d3e2d1acd.png
画布中的小程序码是用base64格式的,是要替换成网络图片还是本地图片?
wx.request({
url: 'user/getQRCode',
header: {
'content-type': 'application/json'
},
data: {
scene: id,
page: 'pages/shop/detail/detail',
width: '430px',
},
method: "Post",
success: function (res) {
if (res.statusCode == '200') {
console.log('获取二维码返回结果:' + res.data.data);
that.data.skuBillUrl = "data:image/PNG;base64," + res.data.data.qrCode;
that.drawImage();
}
}, fail: function () {
wx.showModal({
title: '异常',
content: '请求异常,请下拉刷新'
})
}, complete: function () {
wx.hideLoading()
}
})
drawImage():
// 底图
ctx.drawImage('../../../pages/shop/detail/img/product.png', 0 * xs, 0 * xs, ImageBGWidth, ImageBGHeight);
// 文字
ctx.setFillStyle('#000000'); // 文字颜色:黑色
ctx.setFontSize(26 * xs); // 文字字号:22px
ctx.drawImage(that.data.skuBillUrl, CodeOffsetX, CodeOffsetY, 160 * xs, 160 * xs);
ctx.fillText('姓名:' + skuBill.name, TextOffsetX, TextOffsetY);
ctx.fillText('电话:' + skuBill.phone, TextOffsetX, TextOffsetY + 40 * xs);
ctx.setTextAlign('left'); // 文字居中
ctx.draw(false, setTimeout(() => {
console.log(3)
//生成分享图
wx.canvasToTempFilePath({
canvasId: 'sku-bill-canvas',
success: function (res) {
console.info(res.tempFilePath)
that.setData({
skuBillPreUrl: res.tempFilePath,
showCanvas: false
})
//海报预览图
app.globalData.skuBillPreUrl = res.tempFilePath
console.info('skuBillPreUrl:' + that.data.skuBillPreUrl)
}, fail: function (res) {
console.info(res);
}
}, that)
}, 300))
在开发工具上 正常显示背景以及小程序二维码
在真机上 正常显示背景,小程序二维码不显示
已解决,https://www.cnblogs.com/kaiye/p/9909304.html
我是用的网络图片,可以正常绘制。像这种问题,你对比试验一下就可以了。
没用过base64的,方便的话,传到服务器用网络图片吧