微信小程序之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)