javascript - onClick使用jsZip压缩页面上的多个图片src？

Question

我在一个页面上显示了 2 张图片。两张图片都是 data:base64。我已通过 HTML5 download 属性使它们可下载。这是一个很好的交互，但可能会有很多图片在一个页面上下载。我如何使用 jsZip 下载具有 zip-me 类的任何图像:我希望触发器是 id 的 onClick ="zip-btn".

请观看现场演示:

JSFiddle

HTML

<div>
  <img src="base64string" class="zip-me" />
  <a href="base64string" download="image1.png" />
</div>
<div>
  <img src="base64string"  class="zip-me" />
  <a href="base64string" download="image2.png" />
</div>
<button id="zip-btn" onClick="downloadZip()"> Download Zip </button>

Answer 1

每次您调用 .file() 时，它都会向 zip 添加另一个文件。您只需要从图像 src 中获取 base64，并在选项参数中指定 base64 文件类型。这是来自 jszip 的文档:

zip.file("Hello.txt", "Hello World\n");
zip.file("smile.gif", "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=", {base64:     true});
zip.file("magic.txt", "U2VjcmV0IGNvZGU=", {base64: true, binary: false});
zip.file("Xmas.txt", "Ho ho ho !", {date : new Date("December 25, 2007 00:00:01")});
zip.file("folder/file.txt", "file in folder");

zip.file("animals.txt", "dog,platypus\n").file("people.txt", "james,sebastian\n");

// result : Hello.txt, smile.gif, magic.txt, Xmas.txt, animals.txt, people.txt,
// folder/, folder/file.txt