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

【问题标题】：Download multiple images into 1 zip file将多个图像下载到 1 个 zip 文件中
【发布时间】：2015-10-25 22:10:28
【问题描述】：

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

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

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

我已经为此 JSZip API 完成了凉亭安装，并将脚本包含在我的 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);
    }

这里是创建包含内容的 zip 文件的 JSZip API 代码示例：

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 文件中。感谢您的帮助！

【问题讨论】：

看起来是因为我有从 amazonS3 提取的图像 url，我没有将它们存储在可访问的地方 - ng-src 正在加载这些照片。因此，如果可能，我需要弄清楚如何从 ng-src 获取数据，然后运行邮政编码。有没有办法将数据从 ng-src 获取到我的函数中？

标签： javascript angularjs image download zipfile

【解决方案1】：

您应该看到this example。目前，您只需要求浏览器触发文件下载。如果你想创建一个 zip 文件客户端，你的 js 代码需要通过 ajax 调用来访问文件的内容（如果它们没有存储在同一台服务器上，你会遇到 CORS 问题）。

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

触发 ajax 调用（使用JSZipUtils，但如果您只支持最近的浏览器，您可以轻松地使用responseType = "arraybuffer"）
将它们包装到 Promise 中（这里是 jQuery Promise，但您可以使用自己的）
将结果添加到 zip 对象中
等待所有承诺完成后再触发下载

【讨论】：

【解决方案2】：

要以 Zip 格式下载多个文件，我们可以使用 jsZip 和 FileSaver.js，或者如果我们使用 Web API 和 Angularjs，那么我们可以创建一个 API 方法在服务器上创建 zip 归档文件，然后在 angularjs 中我们可以使用 $http发布或获取 api 调用以将文件下载为 zip 文件（我们必须使用 filesaver 将文件保存为 zip 格式）。例如 -

angularjs 中的 api 调用 -

function downloadFiles(files) {
            return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' });
        }

调用上述函数并在响应时使用 fileSaver.js 方法 saveAs 以 zip 格式保存文件，例如 -

//files - array input of files like http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

    downloadFiles(files).then(function (response) {
        //on success
        var file = new Blob([response.data], { type: 'application/zip' });
        saveAs(file, 'example.zip');
    }, function (error) {
        //on error
        //write your code to handle error
    });

【讨论】：

【解决方案3】：

function downloadImageAsZip(imageUrl){
        var zip = new JSZip();
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = imageUrl;
        img.onload = function() {
        $scope.count2++;

        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(this, 0, 0);
        ctx.enabled = false;
        dataURL = canvas.toDataURL("Canvas");
        canvas = null;
        //var base64String = dataURL.replace("/^data:image\/(png|jpg);base64,/", "");
        var base64String = dataURL.replace("data:image/png;base64,", "");
            zip.file("ImageName", base64String, {base64: true});

             zip.generateAsync({type:"blob"}).then(function(content) {
                        saveAs(content, "ZipFileName.zip");
             });

        }

    }

【讨论】：

【解决方案4】：

我把它放在一起，可以让你压缩一组图片网址。

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

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

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

【讨论】：