多图片打包（.zip格式）下载

前端------多图片打包（.zip格式）下载，只支持png格式图片。

  console.log(this.dataForm.name,'dataForm.name');
  var blogTitle = this.dataForm.name            //下载后的压缩包文件名称。
  var zip = new JSZip()
  var imgs = zip.folder(blogTitle)
  var baseList = []
  let fileList = this.dataForm.fileList
  for (var i = 0; i < fileList.length; i++) {
    let image = new Image()
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous')
    // image.crossOrigin = 'anonymous'
    image.onload = function () {
      let canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      let context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      let url = canvas.toDataURL('image/png')           // 得到图片的base64编码数据
      console.log(url,'12345678');
      
      canvas.toDataURL()
      
      baseList.push(url.substring(22))                       // 去掉base64编码前的 data:image/png;base64,
      console.log(baseList,'baseList');
      if (baseList.length === fileList.length && baseList.length > 0) {
        for (let k = 0; k < baseList.length; k++) {
          imgs.file('img' + k + '.png', baseList[k], { base64: true })
        }
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          // see FileSaver.js
          FileSaver.saveAs(content, blogTitle + '.zip')
        })
      }
    }
    image.src = fileList[i].url
    console.log(image.src,'image.src');
  }