canvas绘制多张网络图片

1、最近在做小程序的分享图的时候,后台返回的背景图和小程序码网络图片。canvas不能绘制网络的图片和base64形式的图片。
2、现在的做法是先把图片下载到本地。就是 wx.downloadFile( )。
3、先绘制多张网络的图片，有可能会出现小图先加载大图后加载。导致出现的图片没有完全绘制出来。
4、说了这么多，直接上代码。
5、网络图片的地址一定要在小程序后台——开发设置downloadfile域名。如果不配置域名，会出现开发工具是可以。在真机中打开调试工具也是可以生成分享图的，但是在真机上关闭调试工具就会报错。

  downfile(url){//下载网络图片的promise对象
    return new Promise(function (resolve, reject) {
      wx.downloadFile({
        url:url ,
        success: function (res) {
          resolve(res.tempFilePath)
        }
      })
    })
  },
 onLoad: function (options) {
    wx.showLoading({
      title: '努力生成中...'
    })
    var  that=this;
    //网络图片一定要在后台小程序那设置服务器的域名  downloadFile合法域名
    var avatar = "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIC6rA7qoOZicxAj9cPLBfx7ykSjxgW1RYYhdic1c522ic1uYlQ5xOTZq0Oia3GFIRve3T00b7QjAlLPA/132"
    var  photo=
      "https://t1.huanqiu.cn/992df16f9c31415271942b41c6f9c44a.jpg";

    var promise1 = that.downfile(photo);
    var promise2 = that.downfile(avatar)
    Promise.all([
    promise1, promise2
  ]).then(res => {
   // console.log(res)   就是所有的网络图片都下载到本地后在绘制图像。
    const ctx = wx.createCanvasContext('shareImg')
    ctx.drawImage(res[0], 0, 0, 545, 771)
    ctx.drawImage( res[1], 158, 190, 210, 210)
      ctx.draw(true)

    return res;
  }).then(res => {
    console.log(res);
    if (res.length == 2) {
      setTimeout(function () {
        that.share();//这个是把canvas绘制图片的函数
      }, 1000);/如果不设置时间定时器图片会出不来。

    }

  })


  },

share: function () {
    var that = this
    that.savaImageToPhoto();
    wx.getSetting({
      success(res) {
        console.log(res);
        if (!res.authSetting['scope.writePhotosAlbum']) {
          //没有获取授权
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(res) {  //这里是用户同意授权后的回调
              that.setData({
                saveImgBtnHidden: true,
                openSettingBtnHidden: false,
              })
            },
            fail(res) {////这里是用户拒绝授权后的回调
              that.setData({
                saveImgBtnHidden: false,
                openSettingBtnHidden: true,
              })

            }
          })
        }else{//有授权的功能
        //获取授权后的
          that.setData({
            saveImgBtnHidden: true,
            openSettingBtnHidden: false,
          })
        }
      }
    })


  },

  /**
   * 保存到相册
  */
  save: function () {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        console.log(res)
        wx.showToast({
          title:'图片保存到相册',
          mask: false,
          icon:'success',
          success:function(){

          }
        })

      },
      fail(err){
        console.log(err)
      }
    })

  },

5.后续会继续更新小程序的问题。