将多个文件放入一个 zip 文件中,然后使用 javascript 下载
put multiple files in a zip file and download it using javascript
我有多个图片地址。地址看起来像 https://tmp.ocpu.io/x05fcaa7ec4/graphics/last/png?width=800&height=600.
以上地址可能会在 24 小时后过期。所以请只使用以下两个地址。
http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg and https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg.
我想建一个网站,把这两个图片(地址)压缩成zip文件,用户可以下载zip文件。我不知道这是否可行,但我的以下代码部分有效,我可以下载 zip 文件,但我无法使用任何图像查看器软件打开它。请帮忙,谢谢!
HTML
<!doctype html>
<html>
<head>
<title>Zipper</title>
<script src="jszip.min.js"></script>
<script src="stat_FileSaver.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
和JavaScript(script.js)
var urls = [
'http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg',
'https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'
];
var images = [];
var counter = 0;
// From
function convertImgToBase64URL(url, callback){
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();
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(i+".jpg", images[i].data, {base64: true});
}
zip.generateAsync({type:"blob"}).then(function(file){
saveAs(file, "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);
}
});
}
images[i].data
包含一个数据url(如data:image/png;base64,iVBOR...
),需要去掉data:image/png;base64,
部分才能得到base64内容:
var commaIdx = images[i].data.indexOf(",");
img.file(i+".jpg", images[i].data.slice(commaIdx + 1), {base64: true});
附带说明一下,当图像位于不同的服务器上时,我会收到 CORS 错误。你可能想检查一下你不会遇到这个问题。
我有多个图片地址。地址看起来像 https://tmp.ocpu.io/x05fcaa7ec4/graphics/last/png?width=800&height=600.
以上地址可能会在 24 小时后过期。所以请只使用以下两个地址。 http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg and https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg.
我想建一个网站,把这两个图片(地址)压缩成zip文件,用户可以下载zip文件。我不知道这是否可行,但我的以下代码部分有效,我可以下载 zip 文件,但我无法使用任何图像查看器软件打开它。请帮忙,谢谢!
HTML
<!doctype html>
<html>
<head>
<title>Zipper</title>
<script src="jszip.min.js"></script>
<script src="stat_FileSaver.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
和JavaScript(script.js)
var urls = [
'http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg',
'https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'
];
var images = [];
var counter = 0;
// From
function convertImgToBase64URL(url, callback){
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();
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(i+".jpg", images[i].data, {base64: true});
}
zip.generateAsync({type:"blob"}).then(function(file){
saveAs(file, "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);
}
});
}
images[i].data
包含一个数据url(如data:image/png;base64,iVBOR...
),需要去掉data:image/png;base64,
部分才能得到base64内容:
var commaIdx = images[i].data.indexOf(",");
img.file(i+".jpg", images[i].data.slice(commaIdx + 1), {base64: true});
附带说明一下,当图像位于不同的服务器上时,我会收到 CORS 错误。你可能想检查一下你不会遇到这个问题。