小程序中canvas繪制網絡圖片

小程序中，canvas繪制圖片，可使用drawImage方法，但是繪制網絡圖片時，在手機端不會顯示，需要先將網絡圖片下載到本地，然后用圖片的本地路徑繪制。如下偽代碼：

function downLoadImg(netUrl, storageKeyUrl) {
    wx.getImageInfo({
      src: netUrl,    //請求的網絡圖片路徑
      success: function (res) {
        //請求成功后將會生成一個本地路徑即res.path,然后將該路徑緩存到storageKeyUrl關鍵字中
        wx.setStorage({
          key: storageKeyUrl,
          data: res.path,
        });

      }
    })
  }

downLoadImg(參數一，參數二)//調用如上方法

var headUrl = wx.getStorageSync(storageKeyUrl); //下面用canvas繪制頭像 

　const ctx = wx.createCanvasContext('myCanvas');

　var wxSys = wx.getSystemInfoSync();

　var screenScale = wxSys.screenWidth * 2 / 750;

ctx.save(); // 保存當前ctx的狀態 
ctx.arc(screenScale * 182, screenScale * 355, screenScale * 22, 0, 2 * Math.PI, false); 
ctx.strokeStyle = '#e3e7e8'; ctx.stroke(); ctx.clip(); //裁剪上面的圓形 

if (typeof (headUrl) != 'undefined' && headUrl != '') { 
　　ctx.drawImage(headUrl, screenScale * 160, screenScale * 333, screenScale * 44, screenScale * 44); // 在剛剛裁剪的園上畫圖  
} 
ctx.restore(); // 還原狀態

 注意：在請求網絡圖片時，請求的域名需要在微信服務器的downloadFile 域名內添加配置，否則請求報錯。