Frank Fan Frank Fan - 10 months ago 114
Javascript Question

put multiple files in a zip file and download it using javascript

I have multiple image addresses. The address looks like

Above address may expire after 24 hours. So please just use following two addresses. and

I want to build a website that puts these two images (addresses) into a zip file and users can download the zip file. I don't know if this is possible but my following code works partially and I can download the zip file but it is just I can't open it with any image viewer software. Please help, thanks!


<!doctype html>

<script src="jszip.min.js"></script>
<script src="stat_FileSaver.min.js"></script>
<script src="script.js"></script>




and JavaScript (the script.js)

var urls = [
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});
saveAs(file, "");



for (var i = 0; i<urls.length; i++) {
convertImgToBase64URL(urls[i], function (base64Img, url) {
url: url,
data: base64Img

if (counter == urls.length) {


images[i].data contains a data url (like data:image/png;base64,iVBOR...), you need to remove the data:image/png;base64, part to get the base64 content:

var commaIdx = images[i].data.indexOf(",");
img.file(i+".jpg", images[i].data.slice(commaIdx + 1), {base64: true});

On a side note, when the images are on a different server, I get a CORS error. You may want to check that you won't get issues with this.