javascript - Simple JSZip - 从现有图像创建 Zip 文件

Question

我很难找到不涉及 Base64 或 NodeJS 的 JSZip 的简单文档。基本上，我有一个目录，其中有 test.html 和一个名为“images”的文件夹。该文件夹内有一堆图像。我想从该文件夹中制作一个 zip 文件。

谁能帮我写一些非常简单的“hello world”类型的代码？关于 http://stuk.github.io/jszip/ 的文档包括从 Base64 数据添加图像或添加您在 JavaScript 中创建的文本文件等内容。我想从现有文件创建一个 .zip 文件。

也许使用 JSZip 将图像添加到 .zip 文件的唯一支持涉及通过 Base64 数据添加它们？我在文档中的任何地方都没有看到它，也没有看到 image-url-to-base64 函数，尽管我确实在 StackOverflow 的其他地方找到了一个。

有什么建议吗？

Answer 1

在浏览器中，您可以使用 ajax 请求并使用 responseType 属性来获取 arraybuffer(如果您需要 IE 9 支持，您可以使用例如 jszip-utils):

var xhr = new XMLHttpRequest();
xhr.open('GET', "images/img1.png", true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function(evt) {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var zip = new JSZip();
            zip.file("images/img1.png", xhr.response);
        }
    }
};
xhr.send();

这个例子是有限的，因为它只处理一个文件并手动创建 xhr 对象(我没有使用任何库，因为你没有提到任何库)但应该告诉你如何去做.

您可以在 JSZip documentation 中找到更完整的示例: 它使用 jQuery promises 和 jszip-utils 下载文件列表并在之后触发下载。

如果您使用库来处理 ajax 请求，请务必检查您是否可以请求数组缓冲区。默认设置是将响应视为文本，这会损坏您的图像。例如 jQuery 应该支持它 soon .