将多个图像下载到1个zip文件中

Question

我有一个功能,当前下载多个图像并将其保存到用户"下载"文件夹(仅适用于Chrome)

我想将此功能用于下一步,并将这些图像放在一个zip文件中.

下面是我当前代码的示例.我希望与JSZip API我在网上找到我合并的代码在这里.

我已经完成了这个JSZip API的bower安装,并将脚本包含在我的html中.

这是我的代码,可以完美地同时下载多个SINGLE图像:

$scope.downloadPhotos = function() {
    var photoUrls = [];
    for (var x = 0; x < $scope.$parent.photos.length; x++) {

        var p = $scope.$parent.photos[x];
        if (p.isChecked) {
            photoUrls.push($scope.bucketUrl() + p.photoUrl);

        }
    }

    saveImage(photoUrls);
};



/*----this function  saveImage works great (only Chrome)-----*/
    function saveImage(urls) {
        var link = document.createElement('a');

        link.setAttribute('download', null);
        link.style.display = 'none';


        document.body.appendChild(link);

        for (var i = 0; i < urls.length; i++) {
            link.setAttribute('href', urls[i]);
            link.click();
        }

        document.body.removeChild(link);
    }

这里是JSZip API代码示例,用于创建包含内容的zip文件:

function create_zip() {
    var zip = new JSZip();
    zip.add("hello1.txt", "Hello First World\n");
    zip.add("hello2.txt", "Hello Second World\n");
    content = zip.generate();
    location.href = "data:application/zip;base64," + content;
}

现在我只是想知道如何将两者结合起来将我的图像放入zipfile.谢谢你的帮助!

Answer 1

我把它放在一起，让你压缩一组图像 url。

https://jsfiddle.net/jaitsujin/zrdgsjht/

您可以通过修改此行来管理 zip 文件夹结构

filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");

Answer 2

你应该看到这个例子。目前，您只需要求浏览器触发文件的下载。如果您想在客户端创建 zip 文件，您的 js 代码需要使用 ajax 调用访问文件的内容（如果它们不存储在同一服务器上，您将遇到 CORS 问题）。

无需复制/粘贴整个代码，示例：

• 触发 ajax 调用（使用JSZipUtilsresponseType = "arraybuffer" ，但如果您只支持最新的浏览器，则可以轻松使用 a ）
• 将它们包装成承诺（jQuery 承诺在这里，但你可以使用你自己的）
• 将结果添加到 zip 对象中
• 在触发下载之前等待所有承诺完成