onClick使用jsZip压缩页面上的多个图像

onClick use jsZip to zip up multiple images src on the page?

本文关键字：图像 使用 jsZip 压缩 onClick      更新时间：2023-09-26

我有两个图像显示在一个页面上。两个图像都是data:base64。我已经使他们可以通过HTML5 download属性下载。这是一个伟大的互动，但会有潜在的许多图像下载在一个页面上。我如何使用jsZip下载zip-me类的任何图像:我希望触发器是id="zip-btn"的onClick。

请查看现场演示:

JSFiddle 

<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>

每次调用.file()时，它都会向zip中添加另一个文件。您只需要从图像src中获取base64，并在options参数中指定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
相关文章：