小程序canvas繪圖，promise異步處理drawImage()圖片無法顯示

在小程序海報開發時碰到了canvas的一個小問題：

drawImage()繪制圖片無法顯示。

CanvasContext.drawImage()在繪制圖片，網絡圖片必須要先通過 getImageInfo / downloadFile 先下載。

這里，drawImage(‘path’)中本地path如何獲得異步進程getImageInfo下載后的圖片地址？下面需要提前下載獲得多個圖片路徑時就要用到promise異步處理。

 //promise提前封裝下載圖片1路徑
    let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: 圖片1網絡地址,,
        success: function(res) {
          resolve(res.path);
        }
      })
    });
//promise提前封裝下載圖片2路徑
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: 圖片2網絡地址,
        success: function(res) {
          resolve(res.path);
        }
      })
    });
    // all接收數組作為參數, p1 p2 兩個返回值,res為數組結構
    Promise.all([promise1,promise2]).then(res=>{
    ctx.drawImage(res[0])
    ctx.drawImage(res[1])
    )}

Promse.all在處理多個異步處理時非常有用！