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

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

我想把这个函数带到下一步，把这些图像放在一个zip文件中

下面是我当前代码的一个示例。我想将我的代码与我在网上找到的JSZIPAPI合并

我已经为这个JSZIPAPI完成了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);
    }

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

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

在不复制/粘贴整个代码的情况下，示例：

• 触发ajax调用（但如果您只支持最新的浏览器，则只能轻松地使用

  responseType=“arraybuffer”

  ）
• 将它们包装成承诺（这里是jQuery承诺，但您可以使用自己的承诺）
• 将结果添加到zip对象中
• 等待所有承诺完成后再触发下载

---

要下载多个Zip格式的文件，我们可以使用jsZip和FileSaver.js，或者如果我们使用Web API和Angularjs，那么我们可以创建一个API方法在服务器上创建Zip archieve文件，然后在Angularjs中，我们可以使用$http post或get API调用将文件下载为Zip文件（我们必须使用FileSaver以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
    });

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

---

我把这些放在一起，可以让你压缩一个图像URL数组

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

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

filename=filename.replace（/[\/\*\\\\\\\ \：\\？\“\\]/gi，”）.replace（“httpsi.imgur.com，”）；

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

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