Jump to content

save canvas to image and then save it on the device


odelia
 Share

Recommended Posts

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...