1.WXML-CANVAS隐藏问题
<!-- 隐藏画布 -->
<view style='width:0px;height:0px;overflow:hidden;'>
<!-- 解决ios下拉出现画布的问题 -->
<view style='width:100%;height:300rpx;'></view>
<canvas style='width:{{W}}px;' canvas-id="realCanvas" ></canvas>
</view>
2.JS-CANVAS-绘制图片
这里要注意的点很多
1.canvas绘制只支持本地文件,使用wx.getImageInfo()或wx.downloadFile()获取图片本地路径
2.需要在开放平台配置下downloadFile合法域名
3.在不打开调试时调用非https或https不可用时,getImageInfo()既不跳到成功的回调也不跳到失败的回调,也不报错,js执行上下文时不走这一步了,很郁闷。所以不成功时检查下https证书是否过期
4.微信开发者工具功能还不完善,还有许多BUG。有时候明明在开放平台配置了download域名,域名信息也显示我配置好了。但是关闭“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”之后,也一直报错说是没配置,绘制图片也就无效了。这时候上传到体验版测试就没问题了
wx.getImageInfo({
src: that.data.QRimg,
success: function (res) {
},complete:function(res){
ctx.drawImage(res.path, 12, totalHeight, width, width)
ctx.stroke()
ctx.draw(true, setTimeout(function () {
}, 200))
}
})
3.JS-CANVAS-图片不清晰
destWidth*n,destHeight*n放大图片
wx.canvasToTempFilePath({
canvasId: 'realCanvas',
width: that.data.W,
height: that.data.totalHeight,
destWidth: that.data.W * 2,
destHeight: that.data.totalHeight * 2,
success: function (res) {
wx.previewImage({
urls: [res.tempFilePath],
})
}
}, this)