js实现多张图片打包成zip

要实现将多张图片打包成zip，可以使用JSZip和FileSaver.js这两个库。其中JSZip是一个用于生成和读取zip文件的JavaScript库，FileSaver.js则是一个可以将Blob/File对象另存为文件的JavaScript库。下面是实现步骤：

1. 引入JSZip和FileSaver.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>

1. 创建JSZip对象：

var zip = new JSZip();

1. 使用JSZip添加文件：

// 添加名为image1.jpg的文件
zip.file("image1.jpg", imgData1, {base64: true});

// 添加名为image2.png的文件
zip.file("image2.png", imgData2, {base64: true});

其中imgData1和imgData2分别是Base64编码后的图片数据，可以通过canvas、AJAX请求等方式获取。

1. 使用JSZip生成zip文件：

zip.generateAsync({type:"blob"}).then(function(content) {
  // 使用FileSaver.js保存zip文件
  saveAs(content, "images.zip");
});

通过generateAsync()方法生成zip文件，并使用FileSaver.js的saveAs()方法保存文件。最终得到一个名为images.zip的ZIP文件，包括了两张图片文件image1.jpg和image2.png。

示例1：

// 获取图片数据
var img1 = document.getElementById("img1");
var canvas1 = document.createElement("canvas");
canvas1.width = img1.width;
canvas1.height = img1.height;
var ctx1 = canvas1.getContext("2d");
ctx1.drawImage(img1, 0, 0);
var imgData1 = canvas1.toDataURL("image/jpeg");

// 使用JSZip添加文件
var zip = new JSZip();
zip.file("image1.jpg", imgData1, {base64: true});

// 使用JSZip生成zip文件，并保存文件
zip.generateAsync({type:"blob"}).then(function(content) {
  // 使用FileSaver.js保存zip文件
  saveAs(content, "image1.zip");
});

这个示例将一个名为img1的标签包含的图片打包成了一个名为image1.zip的zip文件。

示例2：

// 获取图片数据
var imgUrls = ["https://example.com/image1.png", "https://example.com/image2.jpg"];
var imgs = [];
var count = 0;
for (var i = 0; i < imgUrls.length; i++) {
  var img = new Image();
  img.crossOrigin = "anonymous";
  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    imgs.push(canvas.toDataURL("image/jpeg"));
    count++;
    if (count == imgUrls.length) {
      // 所有图片加载完成后，使用JSZip添加文件
      var zip = new JSZip();
      for (var j = 0; j < imgs.length; j++) {
        zip.file("image" + j + ".jpg", imgs[j], {base64: true});
      }

      // 使用JSZip生成zip文件，并保存文件
      zip.generateAsync({type:"blob"}).then(function(content) {
        // 使用FileSaver.js保存zip文件
        saveAs(content, "images.zip");
      });
    }
  }
  img.src = imgUrls[i];
}

这个示例将一个包含图片URL的数组中的所有图片打包成了一个名为images.zip的zip文件。所有图片在加载完成后，使用JSZip添加文件并保存zip文件。