Saving an image from canvas in a zip

Question

I have a canvas in HTML5 that can end up being a very long dataURL (long enough to crash chrome if they try to navigate to it). Because of that, I'm trying to save the image in a zip using JSZip. I've tried the following two things:

var zip = new JSZip();
var savable = new Image();
savable.src = canvas.toDataURL();
zip.file("image.png", savable, {base64: true});
var content = zip.generate();
var blobLink = document.getElementById('blob');
blobLink.download = "image.zip";
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"}));

This causes the following error:

Uncaught TypeError: Object #<HTMLImageElement> has no method 'replace'

I also tried this:

var zip = new JSZip();
zip.file("image.png", canvas.toDataURL(), {base64: true});
var content = zip.generate();
var blobLink = document.getElementById('blob');
blobLink.download = "image.zip";
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"}));

That appears to work, but then the image in the zip is not valid. What can I do to save the image properly?

Answer 1

You're generating a data uri, which has schema, mime-type etc before the actual base64 data data:[<MIME-type>][;charset=<encoding>][;base64],<data>. You'll have to remove all the content before the data then use it.

zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});