gpt4 book ai didi

javascript - 如何通过ajax获取多个文件并通过JavaScript将它们下载为zip文件?

转载 作者:行者123 更新时间:2023-11-29 19:24:31 28 4
gpt4 key购买 nike

是否有可能创建一个用 JavaScript 编写的客户端应用程序(在浏览器中运行),它通过 ajax 获取多个图像文件,然后将它们压缩为 zip(或 tar 或其他)并将其返回给用户作为文件下载(没有任何服务器端逻辑)?

工作流程是这样的:

  1. 在浏览器中打开网站 mydomain.com
  2. 网站通过 ajax 从 mydomain.com/images/image1.pngmydomain.com/images/image2.jpg 收集图像。
  3. 这两个文件现在都自动压缩成存档文件(例如 zip、gzip 或 tar 或其他文件)
  4. 用户在其浏览器中收到此存档文件的通常下载提示。

到目前为止,我认为我可以通过 jQuery 运行第 1-2 部分:

var urls = [
'image1.png',
'image2.jpg'
];
var images = [];
var counter = 0;

function createArchive(images){
// How to implement this?
}

function download(archive){
// How to implement this?
}

for (var i = 0; i<urls.length; i++) {
$.ajax('images/' + urls[i]).done(function(data) {
images.push(data);
counter++;

// Offer download of archive when all ajax calls are done
if (counter == urls.length){
var archive = createArchive(images);
download(archive);
}
});
}

但是从这里我不知道如何从图像数组创建 zip 文件。我该怎么做?

重要:这必须在所有主流浏览器(如 IE、Firefox、Chrome、Safari)中运行

最佳答案

天哪!我使用这些库让它工作:

HTML

<!doctype html>

<html>

<head>
<title>Zipper</title>
<script src="jszip.min.js"></script>
<script src="FileSaver.min.js"></script>
<script src="script.js"></script>
</head>

<body>

</body>

</html>

我的script.js

var urls = [
'yufegi.jpg',
'duck.jpg'
];
var images = [];
var counter = 0;

// From http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL, url);
canvas = null;
};
img.src = url;
}

function createArchive(images){
// Use jszip
var zip = new JSZip();
var img = zip.folder("images");
for (var i=0; i<images.length; i++) {
img.file(images[i].url, images[i].data, {base64: true});
}
var content = zip.generate({type:"blob"});

// Use FileSaver.js
saveAs(content, "images.zip");
}

for (var i = 0; i<urls.length; i++) {
convertImgToBase64URL(urls[i], function (base64Img, url) {
images.push({
url: url,
data: base64Img
});
counter++;
if (counter == urls.length) {
createArchive(images);
}
});
}

关于javascript - 如何通过ajax获取多个文件并通过JavaScript将它们下载为zip文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31384408/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com