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

Question

我有一个功能，目前可以下载多张图片并将它们保存到用户的“下载”文件夹中(仅适用于 Chrome)

我想把这个功能带到下一步，将这些图像放在一个 zip 文件中。

下面是我当前代码的示例。我想将我的代码与我在网上找到的 JSZip API 合并 here .

我已经为这个 JSZip API 安装了 bower，并将脚本包含在我的 html 中。

这是我的代码，可以完美地一次下载多个单张图像:

$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;
}

现在我只是想知道如何将两者结合起来将我的图像放入一个 zip 文件中。感谢您的帮助!

Answer 1

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

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

你可以通过修改这一行来管理zip文件夹结构

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