javascript 将多个图像下载到 1 个 zip 文件中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31793455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download multiple images into 1 zip file
提问by Jason Brewer
I have a function that currently downloads multiple images and saves them to a users "download" folder (Only works in Chrome)
我有一个当前下载多个图像并将它们保存到用户“下载”文件夹的功能（仅适用于 Chrome）
I want to take this function to the next step and put these images in a single zip file.
我想将此功能带到下一步并将这些图像放入单个 zip 文件中。
Below is an example of my current code. I want to merge my code with the JSZip API I found online here.
下面是我当前代码的示例。我想将我的代码与我在这里在线找到的 JSZip API 合并。
I have done the bower install for this JSZip API already and included the script in my html.
我已经为这个 JSZip API 完成了 bower 安装，并将脚本包含在我的 html 中。
Here is my code that works perfectly downloading multiple SINGLE images at once:
这是我的代码，可以完美地一次下载多个 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);
}
And here is the JSZip API code example to create a zip file with content in it:
这是 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;
}
Now I'm just wondering how to combine the two to put my images into a zipfile. Thanks for your help!
现在我只是想知道如何将两者结合起来将我的图像放入一个 zipfile 中。谢谢你的帮助！
回答by Jaitsujin
I put this together that will let you zip an array of image urls.
我把它放在一起，让你压缩一组图像 url。
https://jsfiddle.net/jaitsujin/zrdgsjht/
https://jsfiddle.net/jaitsujin/zrdgsjht/
You can manage zip folder structure by modifying this line
您可以通过修改此行来管理 zip 文件夹结构
filename = filename.replace(/[\/\*\|\:\<\>\?\"\]/gi, '').replace("httpsi.imgur.com","");
回答by Ravindra Vairagi
To Download multiple files in Zip format we can use jsZip and FileSaver.js or if we are using Web API and Angularjs then we can create an API method to create zip archieve file at server and then in angularjs we can use $http post or get api call to download the file as zip file (We have to use filesaver to save the file in zip format). for example -
要以 Zip 格式下载多个文件，我们可以使用 jsZip 和 FileSaver.js，或者如果我们使用 Web API 和 Angularjs，那么我们可以创建一个 API 方法在服务器上创建 zip 存档文件，然后在 angularjs 中我们可以使用 $http post 或 get api 调用将文件下载为 zip 文件（我们必须使用文件保护程序将文件保存为 zip 格式）。例如 -
api call in angularjs -
angularjs 中的 api 调用 -
function downloadFiles(files) {
return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' });
}
call above function and on response use fileSaver.js method saveAs to save file in zip format for example -
调用上面的函数并在响应时使用 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
});
回答by Vic Key
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");
});
}
}
回答by David Duponchel
You should see this example. Currently, you just ask the browser to trigger the download of a file. If you want to create a zip file client side, your js code needs to access the content of the files with ajax calls (you will get CORS issues if they aren't stored on the same server).
你应该看到这个例子。目前，您只需要求浏览器触发文件下载。如果要创建 zip 文件客户端，则 js 代码需要使用 ajax 调用访问文件的内容（如果它们未存储在同一服务器上，则会出现 CORS 问题）。
Without copy/pasting the whole code, the example:
无需复制/粘贴整个代码，示例：
- triggers ajax calls (with JSZipUtilsbut you can easily only use a
responseType = "arraybuffer"if you only supports recent browsers) - wrap them into promises (jQuery promises here but you can use your own)
- add the result into a zip object
- wait for all promises to complete before triggering a download
- 触发 ajax 调用（使用JSZipUtils但
responseType = "arraybuffer"如果你只支持最近的浏览器，你可以很容易地使用 a ） - 将它们包装成承诺（jQuery 承诺在这里，但你可以使用你自己的）
- 将结果添加到 zip 对象中
- 在触发下载之前等待所有承诺完成
