官方说明:
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
解决方法:
- 将canvas正常绘制
- 对canvas进行定位,远离手机屏幕显示区域
- 将canvas转换为img图片,将转换后的图片进行展示
- 如果图片清晰度不够,则将canvas成倍的绘制,将转换后的图片按照正常尺寸展示即可
<view wx:if="{{isImg}}" class="pic" style="text-align: center;"><canvasclass="qrCode"bindtap="refresh"style="width:{{ width*6 }}px;height:{{ width*6 }}px;position: absolute;top:-99999999px;left:-999999999999px;"canvas-id="ticketQrCode"></canvas><image class="qrCode" style="width:{{ width }}px;height:{{ width }}px" bindtap="refresh" src="{{codeImg}}" /></view>async qrCode() {const xy = (this.data.width - 20) / 2const res = await getQrCodeUnique({ orderNo: this.data.orderInfo.orderNo })this.setData({codeInfo: `orderNo=${this.data.orderInfo.orderNo}&uid=${res.data}&type='shuttle'`,})// eslint-disable-next-line no-new, new-capnew drawQrcode({width: this.data.width,height: this.data.width,canvasId: 'myQrcode',text: `orderNo=${this.data.orderInfo.orderNo}&uid=${res.data}&type='shuttle'`,image: {imageResource: '../resources/mogo.png',dx: xy,dy: xy,dWidth: 23,dHeight: 23,},})setTimeout(() => {this.createImg()}, 100)},createImg() {const _this = thiswx.canvasToTempFilePath({x: 0,y: 0,width: _this.data.width,height: _this.data.width,destWidth: _this.data.width,destHeight: _this.data.width,canvasId: 'myQrcode',success(res) {_this.setData({imgUrl: res.tempFilePath,})},})},