微信小程序canvas繪製圖片的注意事項---不能是網絡圖片

上週五做了個需求，用canvas畫圖並保存到本地，沒在手機上測試，今天看的時候突然發現：

drawImage(imageResource, dx, dy, dWidth, dHeight)
其中imageResource真機不支持網絡圖片的繪製

所以就是明明在開發者工具上都是好的，但是在真機上測試的時候圖片是繪製不出來的，想保存的地方也保存爲空。
那麼既然只能繪製本地的圖片，而我們使用的圖片又大都是接口返回的圖片鏈接，所以首要想到的就是把圖片保存到本地，然後再進行繪製即可。

    var that = this;
    var context = wx.createCanvasContext('firstCanvas');
    applyApi1.postJson('xxxxx/xxxxxxxxxxxxxx',{},res => {
      console.log("res",res)
      wx.downloadFile({
        url: res.imgUrl,
        success: function (res) {
          console.log(res);
          var imgUrl= res.tempFilePath;
          context.drawImage(imgUrl, 40, 130, 220, 220)
          context.draw()
        }, fail: function (fres) {
        
        }
      })
    })

我這邊已經解決完了，就不復現回去上對比圖了，反正就是網絡圖片在真機上展示不出來是一片空白的，開發者工具是好的，這樣解決就會解決這個問題。