Fatal编程技术网
  • javascript/
  • Javascript onClick使用jsZip压缩页面上的多个图像src？

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

javascript css html

Javascript onClick使用jsZip压缩页面上的多个图像src？,javascript,css,html,Javascript,Css,Html,我有两个图像显示在一个页面上。两个图像都是数据：base64。我已经通过HTML5downloadattribute使它们可以下载。这是一个伟大的互动，但将有可能在一个页面上下载许多图像。如何使用jsZip下载zip-me类的任何图像：我希望触发器是onClickofid=“zip-btn” 请观看现场演示： HTML <div> <img src="base64string" class="zip-me" /> <a href="base64string

我有两个图像显示在一个页面上。两个图像都是
数据：base64
。我已经通过HTML5
download
attribute使它们可以下载。这是一个伟大的互动，但将有可能在一个页面上下载许多图像。如何使用
jsZip
下载
zip-me
类的任何图像：我希望触发器是
onClick
of
id=“zip-btn”

请观看现场演示：


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>




下载Zip

每次调用.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



还需要一个创建和返回对象，但它可以工作。。。我已经编辑了你的代码