微信小程序之Canvas填坑

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)