VUE批量下载图片打包成zip下载

 import JSZip from 'jszip';
import { saveAs } from 'file-saver';
downloadImages() {
  var zip = new JSZip();
  // 创建images文件夹
  //imageUrls=['本地路径','或者网络路径'];
  var imgFolder = zip.folder("images");
  let flag = 0 //  判断加载了几张图片的标识
  for (let i = 0; i < imageUrls.length; i++) {//遍历图片  imageUrls
    this.getBase64(imageUrls[i]).then(base64 => {  //调用getBase64()方法,传入图片网络地址得到base64数据
      base64 = base64.split('base64,')[1]
      imgFolder.file(`image${i}.png`, base64, { base64: true })//自定义图片名字，存进images文件夹里面
      if (flag === this.imageUrls.length - 1) {
        zip.generateAsync({ type: "blob" }).then((blob) => {
          saveAs(blob, "xxxxxx.zip")//自定义文件压缩包名字
        })
      }
      flag++
    });
  }
},


//传入图片地址，返回base64格式数据
getBase64(img) {
  var image = new Image();
  image.crossOrigin = '*';//解决图片跨域问题  //解决不了
  image.src = img;
  return new Promise((resolve, reject) => {
    image.onload = () => {
      resolve(this.getBase64Image(image));
    }
  })
},

//创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
getBase64Image(img, width, height) {
  var canvas = document.createElement("canvas");
  canvas.width = width ? width : img.width;
  canvas.height = height ? height : img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  var dataURL = canvas.toDataURL();
  return dataURL;
},