Javascript - Downloading all Media on page

Question

As a side project, I made an image gallery that parses a page for media elements and displays them neatly on a page. I'd like to create the option to download every media object with just one action.

So imagine a page has 50 images on it, each one not hosted locally. Is there a way to start a download where all 50 images are bundled together into one folder/tar?

Bonus points: At this point, all the media will have already been downloaded/loaded onto the page. It'd be awesome if this download action doesn't need to re-fetch all the data for each object.

Answer 1

Alright to do such a thing you would need a canvas and a 2d context:

var
    mediaCanvas = document.getElementById('mediacanvas'),
    mediaImages = document.getElementsByClassName('mediaimage'),
    ctx = document.getElementById('drawcanvas').getContext('2d'),
    rawImages = [], tmpImage, i
;

Then for each image you would do something like

for (i = 0; i < mediaImages.length; i++) {
    tmpImage = mediaImages[i];
    // resize canvas to image size
    canvas.width = tmpImage.width;
    canvas.height = tmpImage.height;
    ctx.drawImage(tmpImage, 0, 0);
    // get base64 image data
    rawImages.push(canvas.toDataURL('jpg')); // one could detect the original image type here
}

Now you've the base64 encoded image data in rawImages. Next we need to turn the data into some proper binary ArrayBuffer using one of the methods described here.

When this is done you can either build your own tar/zip/whatever packer, or use something like pako.js to assemble an archive containing your data. The last thing left to allow the user to download the data is to create a Blob from the resulting ArrayBuffer and a corresponding ObjectURL to it.