小程序如何一个页面生成多个cavas(这个是根据后台返回的二维码网址的数量决定的)并将多张cavas保存在本地

这个只要是利用循环把数据进行渲染，包括保存图片在本地也是利用循环
具体代码如下
wxml

         <canvas canvas-id="canvas{{index}}" wx:for='{{ cavasList }}' wx:key='index' class='to-absolute' style='z-index:{{ cavasList.length-index }}'></canvas>
           <button class=' to-flex-center wrap-width-normal justify-center color-white ' style='line-height:120rpx;border:0 none;padding:0;border-radius:60rpx;font-size:32rpx' hover-class='detail-hover'>
      <image src='/images/downLoad.png' style='width:44rpx;height:44rpx;margin-right:20rpx'></image>
      <text> 保存到手机相册</text>
    </button>

<--这部分是当用户点击保存图片时提示还有多少张图片在下载弹框-->
<cover-view class='shadow' wx:if='{{ downloading }}'></cover-view>
<cover-view wx:if='{{ downloading }}' class='down-wrapper to-fixed'>
 <cover-view class='to-flex flex-end'>
     <cover-image src='/images/cancel-gray.png' style='width:44rpx;height:auto' mode='widthFix' bindtap="closeTips"></cover-image>
 </cover-view>
   <cover-view class='font-size-mid-big  text-align font-weight-bold color-b4242'>正在保存乘客码</cover-view>
   <cover-view class='font-weight-bold  text-align color-00C1C1 padding-top-bottom-Mid-big' style='font-size:44rpx'>{{ downloadingNumber }}</cover-view>
   <cover-view class='font-size-mid-small  text-align color-8F96A3'>保存时请勿关闭或退出小程序</cover-view>
</cover-view>

wxss

canvas {
  width: 343px;
  height: 212px;
  background: #fff;
  border-radius: 10rpx;
  margin: 20rpx auto;
  /* box-shadow: 0 6rpx 6rpx rgba(0,0,0,.1); */
}
button{
  background:transparent;
 font-size: 32rpx !important;
}
/* 温馨提示 */
.reminder-wrapper{
  color: #8F96A3;
 padding-top: 40rpx;
 padding-bottom: 34rpx;
  font-size:28rpx;
  width:686rpx;
}
/* 下载图片的弹框 */
.down-wrapper{
  width: 520rpx;
  z-index:999;
  border-radius: 30rpx;
  left:116rpx;
  background: #fff;
  top: 40%;
  padding: 20rpx 20rpx 40rpx 20rpx;
}
.shadow{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 99;
}

js部分

var app = getApp();
const util = require('../../../utils/util.js');

Page({
  onLoad: function() {
    this.setData({
      text: wx.getStorageSync('position') + '城市客运交通管理处',
      title: wx.getStorageSync('position') + '出租汽车乘车实名登记'
    })
    console.log(wx.getStorageSync('position'), '查看地理位置信息')
  },
  onShow: function() {
   
  },
  data: {
    cavasList: [],
    isIphoneX: app.globalData.isIphoneX, //判断是否是苹果X以上型号
    statusBarHeight: getApp().globalData.statusBarHeight, //自定义的头部获取的页面高
    logo: '/images/qrcode-bg.png',
    title: '',
    textImg: '/images/jiandu.png',
    textImgLast: '/images/jishuzhichi.png',
    text: '',
    conpanyName: ' x 华格科技',
    code: ''
  },
  // 返回到首页
  returnHome: function() {
    app.globalData.sweepCodeFlag = false
    wx.redirectTo({
      url: '/pages/home/index/index?sweepCodeFlag=true',
    })
  },
  onReady: function() {
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    let that = this
    setTimeout(() => {
    //这一块是封装的请求后台接口的request 
      util.request([], [, res => {
        that.setData({
          cavasList:res
        })
        for (let i = 0; i < res.length; i++) {
        console.log(res, '查看二维码信息')
          wx.showLoading({
            title: '正在生成请稍后..',
          })
        wx.getImageInfo({ // 根据头像地址下载头像并存为临时路径
          src: res[i].scanUrl,
          success: res1 => {
            console.log(res1)
            wx.hideLoading()
            console.log(res1.path, '查看临时存的路径图片')
            that.setData({
              // code: 'data:image/png;base64,' + res
              code: res1.path
            })
        
              // 生命周期函数--监听页面初次渲染完成
              var ctx = wx.createCanvasContext('canvas' + i)
              // 设置背景
              ctx.setFillStyle('#ffffff')
              ctx.fillRect(0, 0, 343, 212)
              // logo
              ctx.drawImage(this.data.logo, 0, 0, 343, 212)
              console.log(that.data.code, '查看数据情况')
              ctx.setStrokeStyle("rgba(0,0,0,.1)")
              ctx.setLineWidth(0.3)
              ctx.moveTo(0, 49)
              ctx.lineTo(300, 49)
              ctx.stroke()
              // 所在城市
              ctx.setFontSize(11)
              ctx.setFillStyle("#fff")
              textHandle(this.data.title, 20, 38, 170, 18);
              // 所在车厢
              ctx.setFontSize(14)
              ctx.setFillStyle("#fff")
              textHandle((i > 10 ? (i + 1) : "0" + (i + 1))  + '节车厢', 280, 174, 170, 18);
              // 文字说明
              ctx.setFontSize(10)
              ctx.setFillStyle("#424752")
              textHandle(this.data.text, 10, 201, 170, 15);
              var dimension = ctx.measureText(this.data.text)
              console.log(dimension.width)
              ctx.drawImage(this.data.textImg, dimension.width + 12, 191, 26, 12);
              ctx.setFontSize(10)
              ctx.setFillStyle("#424752")
              textHandle(this.data.conpanyName, dimension.width + 40, 201, 170, 15);
              var dimension1 = ctx.measureText(this.data.conpanyName).width
              ctx.drawImage(this.data.textImgLast, dimension.width + dimension1 + 46, 191, 46, 12);
              ctx.drawImage(this.data.code, 230, 40, 80, 80);

              function textHandle(text, numX, numY, textWidth, lineHeight) {
                var chr = text.split(""); // 将一个字符串分割成字符串数组
                var temp = "";
                var row = [];
                for (var a = 0; a < chr.length; a++) {
                  if (ctx.measureText(temp).width < textWidth) {
                    temp += chr[a];
                  } else {
                    a--; // 添加a--，防止字符丢失
                    row.push(temp);
                    temp = "";
                  }
                }
                row.push(temp);

                // 如果数组长度大于2 则截取前两个
                if (row.length > 2) {
                  var rowCut = row.slice(0, 2);
                  var rowPart = rowCut[1];
                  var test = "";
                  var empty = [];
                  for (var a = 0; a < rowPart.length; a++) {
                    if (ctx.measureText(test).width < textWidth - 10) {
                      test += rowPart[a];
                    } else {
                      break;
                    }
                  }
                  empty.push(test);
                  var group = empty[0] + "..."; // 这里只显示两行，超出的用...展示
                  rowCut.splice(1, 1, group);
                  row = rowCut;
                }
                for (var b = 0; b < row.length; b++) {
                  ctx.fillText(row[b], numX, numY + b * lineHeight);
                }
              }
              // 完成
              ctx.draw()
        

          }
        })
      }

      })
    }, 200)

  },
  // 关闭提示
  closeTips:function(){
    this.setData({
      downloading: false,
    })
  },
  // 生成图片并保存到本地的 js：
  saveImage() {
    var that = this
    // wx.getSetting({
    //   success: function (res) {
    //     console.log(res.authSetting[''])
    //   }
    // })
    for (let i = 0; i < this.data.cavasList.length; i++) {
      if (that.data.cavasList.length - 1 != i) {
        that.setData({
          downloading:true,
          downloadingNumber : (i + 1) + '/' + that.data.cavasList.length
        })
        // wx.showLoading({
        //   title: (i + 1) + '/' + that.data.cavasList.length,
        //   // title: '加载中',
        //   mask: true
        // })
       }
      wx.canvasToTempFilePath({
        canvasId: 'canvas' + i,
        success(res) {
          console.log(res,'调成功饿了吗保存到手机')
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              console.log(that.data.cavasList.length - 1)
              console.log(that.data.cavasList.length - 1 == i)
              if (that.data.cavasList.length - 1 == i) {
                console.log(that.data.cavasList.length - 1, '直接进来了吗')
               that.setData({
                 downloading: false
               })
                wx.showToast({
                  title: '已保存到相册',
                  icon: 'success',
                  image: '/images/success-icon.png'
                })
              } 

            },
            fail: function(err) {
              wx.openSetting({
               success:function(res){
                 console.log(res)
               }
              })
              console.log(err, '查看错误信息')
            }
          })
        }
      })
    }
  },
})