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

我这边已经解决完了，就不复现回去上对比图了，反正就是网络图片在真机上展示不出来是一片空白的，开发者工具是好的，这样解决就会解决这个问题。