小程序canvas如何导入网络图片并保存图片

Question

微信小程序canvas在导入网络图片时，模拟器上可以显示 但是真机预览没有显示，所以做了下改动 把网络图片下载到本地，再导入canvas，模拟器和真机还是不显示，找不出原因
function downLoadImg(netUrl, storageKeyUrl) {

  wx.getImageInfo({
    src: netUrl,  
    success: function (res) {
      wx.setStorage({
        key: storageKeyUrl,
        data: res.path,
      });

    }
  })
}
var image = url + "images/24/2018/03/JZtspJM73RInTt961Spc99M1ZzvS79.jpg"
downLoadImg(image,'imgs')
var headUrl = wx.getStorageSync('imgs')
ctx.drawImage(headUrl, wid / 2, initY + 20, 200, 200)
ctx.draw()

Answer 1

1.资源需要https协议，手机上看不了有可能是因为这个；
2.都看不到是可能“画布污染”了，你要把当前页面地址和图片地址放在一个域名下，且没有其他域名的资源也drwa这个画布上。

Answer 2

画布所显示的图片要先下载到手机里，然后用success返回的tempFilePath路径画入画布

wx.downloadFile({
   url: _avatar,
   success: function (res) {
       var _avatarPath = res.tempFilePath
       const ctx = wx.createCanvasContext('myCanvas')                                                               
       ctx.drawImage(_avatarPath, 340 * 0.5 - 46, 400 * 0.15, 105, 105)
       }
});