save canvas to image and then save it on the device

Question

I'm trying to find a way to capture the canvas and save it on the device (any device - mobile and desktop).

Right now I'm having difficulty with the first part (didn't get to the second one yet...)

I'm trying the blob function but all I get is a black Square - even when the background on the canvas is gray or yellow...

var canvas = document.getElementById("myCanvas");
var imagData;


var dataURL = canvas.toDataURL( "image/png" );
var data = atob( dataURL.substring( "data:image/png;base64,".length ) ),
       asArray = new Uint8Array(data.length);

for( var i = 0, len = data.length; i < len; ++i ) {
    asArray[i] = data.charCodeAt(i);    
}

var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );

var img = document.createElement("img");
img.src = (window.webkitURL || window.URL).createObjectURL( blob );
document.body.appendChild(img);

How do I capture the canvas with all of the graphics? And then, How do I save it on the device?

Thanks in advance

Possible duplicate of [how to save canvas as png image?](http://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image) — Aᴍɪʀ, Dec 15 '15 at 08:09
Does your `dataURL` variable have what looks like a valid URL string? Note: Not all browsers support `Blob` yet. *Thinking of mobile devices:* Storage on mobile is precious so (depending on your design & requirements) instead of saving the canvas content with `.toDataURL` you might instead save each of the drawing commands that created the content. Then recreate the content by replaying the saved commands. — markE, Dec 15 '15 at 16:18

save canvas to image and then save it on the device

0 Answers0