Is it possible to dynamicly zip files before downloading from another servers?

javascript, zip

Solution

take a look at this code: I have assembled a Demo for you to get started from there. Scroll down to the last lines of the code.

First we need to laod the images into `<img>` tags. then we will read the content of them. then all can be done via the jszip.

but there are limitations. you can not load images from another domains. so images should be in the same url or you dynamically load them via server side like: `http://yourdomain.com/fileLoader.php?url=Url_To_External_Image`

here is the code snipee that do the magic:

function getBase64Image(imgage) {
    var canvas = document.createElement("canvas");
    canvas.width = imgage.width;
    canvas.height = imgage.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgage, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var img = $("<img />").attr('src', '../../../img/logo.png');

img.load(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image!');
    }
    else {
        var zip = new JSZip();
        content = getBase64Image(img[0]);
        zip.file("24.jpg", content + "\n");
        var content = zip.generate();
        location.href="data:application/zip;base64,"+content;
    }
});

Problem

I am wondering is it possible to write browser extension or simple Java Script code, which having a list of URLs to different location, could zip everything together. I mean... For instance...having 3 different image files on: - http://example1.com/a.png - http://example22.com/b.png - http://example333.com/c.png Is it possible to download all of them as zipped files archive images.zip by Java Script code on http://mysite.com ? I have found JSZip, however I don't know how use it to load files from different servers.

Original source