微信小程序关于canvas的一系列用法

我要将3张图片都通过前端方法加入一个二维码，我改怎么做呢，这个时候我想到了canvas

首先使用遍历的方法，通过for遍历，有几张图片，遍历几个画布

<view style="position:fixed;top:999999999999999999999rpx;">
    <canvas wx:for="{{samples}}" canvas-id='{{item.sampleId}}' style="width:{{item.str.canvasWidth}}px;height:{{item.str.canvasHeight}}px;background-color:white;"></canvas>
</view>

中间有一段关于canvasWidth和canvasHeight的，这是我要在后续进行图片的大小获取后将值赋值给画布

      wx.getImageInfo({    //获取二维码的图片信息
        src: data.qrUrl,  
        success(res) {
          qrUrl = res.path  
          qrUrlWidth=res.width
          qrUrlHeight=res.height
          that.data.samples.forEach(function (item, index) {
            var picture = item.samplePicKey
            wx.getImageInfo({   //获取将要放在画布上的图片信息
              src: picture,
              success: function (ret) {


                var str = {
                  canvasWidth: ret.width,
                  canvasHeight: ret.height,
                  id: item.sampleId
                }
                var a = that.data.samples
                a[index].str = str
                that.setData({  //将图片大小放进对应图片的对象中
                  samples: a
                })

                const ctx = wx.createCanvasContext(item.sampleId.toString())
                picture = picture.toString()

                ctx.drawImage(ret.path, 0, 0, ret.width, ret.height)//在画布上绘入图片，参数含义移步手册。 
                ctx.drawImage(qrUrl, 0, 0, (qrUrlWidth * (ret.height)) / (4 * qrUrlHeight), ret.height / 4)  //打上去的二维码默认高度为四分之一
                ctx.draw();

              },
            
            })
          })
        }
      })

这一部分我们用draw方法在画布上方法后，我发现我不能直接在draw方法中加载canvas下载图像的方法canvasToTempFilePath，经过一系列尝试，我得把它独立拿出来，并且，不能通过forEach同时获取3张画布的值，只能通过递归一个个获取。
这里还要吐槽一下这个函数的麻烦之处，它获取过来的图片还得通过getImageInfo和调用用户授权保存权限才能保存到本地。

var that = this
   
    wx.canvasToTempFilePath({
      canvasId: that.data.samples[index].sampleId,
      success: function (res) {
        
        var tempFilePath = res.tempFilePath;
       
        wx.getImageInfo({
          src: tempFilePath,
          success: function (ret) {
           

            var path = ret.path;
            wx.getSetting({
              success(res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                  wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success() {

                    }
                  })
                }
              },
            
            })

            wx.saveImageToPhotosAlbum({
              filePath: path,
              success(result) {
                var length = that.data.samples.length
                index = index + 1
                if (index != length) {
                  that.saveToMyself3(index)
                }
                else {
                  that.saveToMyself2()
                  wx.showModal({
                    title: '完成',
                    content: '图片已全部保存',
                  })
                  that.shareClose()
                }
              },
              fail(res) {
                wx.showModal({
                  title: '未保存',
                  content: '未保存',
                })
              },
             
            })
          },
          fail(res) {
            wx.showModal({
              title: '获取图片信息失败',
              content: '请重试',
            })
          },
         
        })

      },
      fail: function (res) {
        console.log(res);
      }
    });