前端多个url图片地址下载为压缩包到本地

需求：在前端实现下载多个图片 url 地址导出压缩包下载到本地

插件：jszip + FileSaver + jQuery

难点：

1. 图片 url 跨域 

2. 异步问题（比如说 确保图片 onload 完再去转 base64，否则图片不完整！）

代码：

1.引入依赖

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2.js 代码

下面这个报错是跨域问题：

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决方法：

var image = new Image();
image.crossOrigin = '';  //   设置 crossOrigin 属性

完整 js 代码：（里面会涉及到异步）

zip () {
      var zip = new JSZip();
      // 创建images文件夹
      var imgFolder = zip.folder("images");

      let arr = ["http://p154oss.oss-cn-szfinance.aliyuncs.com/SCAN/CARCLAIM/INSURANCE/C015105282018805619/0d49d586ad8544efa16ea119d2665b86.jpg?OSSAccessKeyId=LTAIjkNGjBjw2aKn&Expires=1537019034&Signature=WxermpQon3%2F4iliho321e%2F7uuG4%3D",
      "http://p154oss.oss-cn-szfinance.aliyuncs.com/SCAN/CARCLAIM/INSURANCE/C015105282018805619/694cd778800446809f55204ae7320475.jpg?OSSAccessKeyId=LTAIjkNGjBjw2aKn&Expires=1537019034&Signature=K7%2BkVa3LEvsQAQtLLDL7QG0yemE%3D",
  		"http://pic.58pic.com/58pic/15/63/07/42Q58PIC42U_1024.jpg",
      "http://pic.58pic.com/58pic/14/14/07/97b58PICEn4_1024.jpg"
  		];
      let flag = 0 //  判断加载了几张图片的标识
      for (let i = 0;i < arr.length;i++) {
        getBase64(arr[i]).then(function(base64){
              base64 = base64.split('base64,')[1]
              imgFolder.file(i + '.png', base64, { base64: true })
              if (flag === arr.length - 1) {
                zip.generateAsync({ type: "blob" }).then((blob) => {
                    saveAs(blob, "example.zip")
                })
              }
              flag++
            },function(err){
                  console.log(err);//打印异常信息
            });
      }

      function getBase64(img){
          function getBase64Image(img,width,height) {//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;
          }
          var image = new Image();
          image.crossOrigin = '*';
          image.src = img;
          var deferred=$.Deferred();
          if(img){
            image.onload =function (){
              deferred.resolve(getBase64Image(image));//将base64传给done上传处理
            }
            return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
          }
        }
    },

ok！实现效果如下图：

解压后的文件内容：

参考链接

跨域报错

图片 url 转 base64