save canvas to image and then save it on the device

[odelia]

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

[Gob0]

Hi, 

 

i think it's not necessary to use "atob" tosave your canvas. The image element ("img" in your code) supports base64 as source. 

[odelia]

When I try the simple way it also show black square... 

var canvas=document.getElementById("myCanvas");window.open(canvas.toDataURL('image/png'));

I tried it with a regular canvas, not phaser, and it worked... I think it something to do with phaser....

 

when I try to get getContext('2d') I get null...

[odelia]

ok, I figured why I didn't get the context - I defined the game with Phaser.AUTO and should have do it with Phaser.CANVAS....

 

I also found a script that save the file... 

https://github.com/eligrey/FileSaver.js/