将多个文件放在一个 zip 文件中并使用 javascript 下载答案

【问题标题】：put multiple files in a zip file and download it using javascript将多个文件放在一个 zip 文件中并使用 javascript 下载
【发布时间】：2016-11-03 06:46:10
【问题描述】：

我有多个图片地址。地址看起来像https://tmp.ocpu.io/x05fcaa7ec4/graphics/last/png?width=800&height=600。

以上地址可能会在 24 小时后过期。所以请使用以下两个地址。 http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg 和 https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg。

我想建立一个网站，将这两个图像（地址）放入一个 zip 文件中，用户可以下载该 zip 文件。我不知道这是否可行，但我的以下代码部分工作，我可以下载 zip 文件，但只是我无法使用任何图像查看器软件打开它。请帮忙，谢谢！

HTML

<!doctype html>
<html>

  <head>
    <title>Zipper</title>
    <script src="jszip.min.js"></script>
    <script src="stat_FileSaver.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>

  </body>

</html>

和 JavaScript（script.js）

var urls = [
  'http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg',
  'https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'
];
var images = [];
var counter = 0;

// From http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
function convertImgToBase64URL(url, callback){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
      var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'), dataURL;
      canvas.height = this.height;
      canvas.width = this.width;
      ctx.drawImage(this, 0, 0);
      dataURL = canvas.toDataURL();

      callback(dataURL, url);
      canvas = null;
    };
    img.src = url;
}

function createArchive(images){
  // Use jszip
  var zip = new JSZip();
  var img = zip.folder("images");

  for (var i=0; i<images.length; i++) {
    img.file(i+".jpg", images[i].data, {base64: true}); 
  }
      zip.generateAsync({type:"blob"}).then(function(file){
        saveAs(file, "images.zip");

      })

}

for (var i = 0; i<urls.length; i++) {
  convertImgToBase64URL(urls[i], function (base64Img, url) {
    images.push({
      url: url,
      data: base64Img
    });
    counter++;

    if (counter == urls.length) {
      createArchive(images);
    }
  });
}

【问题讨论】：

标签： javascript download zip opencpu

【解决方案1】：

images[i].data包含一个数据url（如data:image/png;base64,iVBOR...），需要去掉data:image/png;base64,部分才能得到base64内容：

var commaIdx = images[i].data.indexOf(",");
img.file(i+".jpg", images[i].data.slice(commaIdx + 1), {base64: true});

附带说明，当图像位于不同的服务器上时，我收到CORS 错误。您可能需要检查您不会遇到此问题。

【讨论】：