Save html5 canvas as image on server

Question

I had an html5 canvas with an image. People can edit / customize the image using javascript. In the end, they should be able to post this image on their Facebook wall. As for my best knowledge, we can fulfill a requirement like this

Save Canvas data as image in to my server --> Post to Facebook with its image URL --> Delete the image on call back. 

First of all, this assumption is true, and the second -

How to save HTML 5 canvas in a png image using javascript when a button is clicked? Is it possible?

Answer 1

You can use JavaScript to save your canvas as a specific image format.

 var mycanvas = document.getElementById("whatever"); //get your canvas var image = mycanvas.toDataURL("image/png"); //Convert the canvas to image, currently converting to .png 

Answer 2

First you need to convert your image to base64 format using Javascript:

 var canvas = document.getElementById("canvas"); var data = canvas.toDataURL("image/jpeg"); 

now through PHP convert to image and save it on the server

 file_put_contents("myimage.jpg", base64_decode(explode(",", $_GET['data'])[1])); 

What all