问题：
使用canvas绘制二维码，当页面滚动时，二维码发生错位
解决方法：
将canvas通过wx.canvasToTempFilePath转为图片，页面通过image显示该图片即可
wxml页面canvas代码，通过css隐藏不显示
<!-- 兑换二维码 -->
<!-- 通过css（position:fixed; left:100%;）隐藏canvas -->
<canvas
type="2d"
id="qrcode"
style="width:{{qr_width}}rpx; height:{{qr_width}}rpx; position:fixed; left:100%;"></canvas>
js代码
// 生成兑换码
generateExchangeQrcode(idx) {
var that = this
let text = JSON.stringify({
coid: that.data.customer_openId,
egp: that.data.merchant_info.meg[idx].p,
})
const query = wx.createSelectorQuery()
query.select('#qrcode')
.fields({ node: true, size: true })
.exec((res) => {
// 生成二维码
const canvas = res[0].node
drawQrcode({
canvas: canvas,
canvasId: 'qrcode',
width: that.data.qr_width,
padding: 25,
background: '#ffffff',
foreground: '#000000',
text: text,
})
// 保存二维码绘制结果到小程序临时目录
that.saveExchangeQrcode2TempFilePath(canvas)
})
},
// 保存二维码绘制结果到小程序临时目录
saveExchangeQrcode2TempFilePath(canvas) {
var that = this
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
that.setData({
exchangeQrcodeFilePath: res.tempFilePath,
})
},
fail(err) {
console.log(err)
}
})
},
