Question

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

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

以下是我当前代码的示例。我想将我的代码与我在网上here找到的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);
    }

以下是创建包含内容的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;
}

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

Answer 1

要以Zip格式下载多个文件，我们可以使用jsZip和FileSaver.js，或者如果我们使用Web API和Angularjs，那么我们可以创建一个API方法来在服务器上创建zip archieve文件，然后在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
    });

Answer 2

我将它们放在一起，可以压缩图像网址数组。

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

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

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

Answer 3

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

没有复制/粘贴整个代码，例如：

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

Answer 4

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

        }

    }

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

4 个答案: