使用 jsZip 将图像从 url 添加到 zip 文件
Posted
技术标签:
【中文标题】使用 jsZip 将图像从 url 添加到 zip 文件【英文标题】：Adding images from url to a zip file using jsZip 【发布时间】：2015-03-01 01:40:16 【问题描述】：我正在尝试使用 jsZip 创建一个 zip 文件。 zip 文件的内容是来自网络的图像。 我创建了以下代码。但是当我运行它时，得到的是一个 22kb 的空 zip 文件。
<html>
<body>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jszip-utils.min.js"></script>
<script>
var imgLinks = ["url1", "url2", "url3"];
function create_zip()
var zip = new JSZip();
for (var i = 0; i < imgLinks.length; i++)
JSZipUtils.getBinaryContent(imgLinks[i], function(err, data)
if (err)
alert("Problem happened when download img: " + imgLink[i]);
console.erro("Problem happened when download img: " + imgLink[i]);
deferred.resolve(zip); // ignore this error: just logging
// deferred.reject(zip); // or we may fail the download
else
zip.file("picture" + i + ".jpg", data,
binary: true
);
deferred.resolve(zip);
);
var content = zip.generate(
type: "blob"
);
saveAs(content, "downloadImages.zip");
</script>
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
<input id="button" type="button" onclick="create_zip()" value="Create Zip" />
</center>
</body>
</html>
（url1、url2 和 url3 替换为我要下载的图片 url）。
为什么我会得到这些空的 zip 文件？
【问题讨论】：
你有这个的固定版本吗？ 我刚刚使用了 CORS 代理。 "corsproxy.com/mangacow.co/wp-content/manga/29/172/0002.jpg" .. 而不是直接 url，我将它附加到免费的 CORS 代理 URL，这就解决了问题。 【参考方案1】：JSZipUtils.getBinaryContent 是异步的：在调用zip.generate() 之后 将添加内容。在生成 zip 文件之前，您应该等待所有图像。
编辑：
如果您正在加载的文件位于不同的服务器上，则该服务器需要发送额外的 HTTP 标头，例如 Access-Control-Allow-Origin: server-hosting-the-page.com。在这种情况下，Firefox 或 Chrome 调试控制台将显示错误。 js 库无法检测到CORS 问题（请参阅here），并且会以空内容触发成功。
【讨论】：
那么在生成 zip 之前如何检查图像是否已完成加载？ 如果你使用延迟对象，你可以看看this example和函数deferredAddZiphere。它使用 jQuery Deferred 对象，但应该很容易修改。
感谢您的回复。尝试了代码，现在 zip 的大小随提供的文件数量而变化，并且所有图像都存在于 zip 文件中，但所有图像都是 0 字节，并且在图像查看器中打开时没有显示任何内容......有什么想法吗？
我的第一个想法：检查是否在生成 zip 之前等待所有延迟对象的解析（$.when.apply($, deferreds) 第 75 行）。除此之外，您可以使用调试器（或 console.log）来检查包含 data 的内容（它应该是最近浏览器上的 ArrayBuffer）。如果您仍然找不到问题，我需要一个工作代码示例 :)
gogol.6te.net/index.html，这就是我正在使用的演示脚本，并通过使用 CORS 代理成功找到了解决方法。它在 Firefox 中运行良好，但在 google chrome 中使用时出现“Failed-no file”错误。以上是关于使用 jsZip 将图像从 url 添加到 zip 文件的主要内容，如果未能解决你的问题，请参考以下文章