How Do I download all the images generated from canvas using javascript?

Question

I am making new drawings on canvas and in particular time, it saves the image of the canvas by canvas.toDataURL().

Following is the code i am using to save urls of the images in an array:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var images = [];
function foo(){
    /* do my work */;
    images.push(canvas.toDataURL());
    /* clearing canvas to get new image and draw again on canvas */ 
}

Now the function foo() will be called many times but after an event, it will stop and now I need to download all of the images stored in images[] by zipping all of the images to a zip file. Is it even possible to do that?

Answer 1

You can do this with JSZip library. See example:

var zip = new JSZip();
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
var content = zip.generate({type:"blob"});
saveAs(content, "example.zip");

You need to use img.file() method in loop for create multiple images (don't forget about different names of files).