Save html5 canvas as image in server

Question

I had a html5 canvas with an image. Peoples can edit/ adjust image using javascript. After all done they must have an option to post that image in their Facebook wall. As of my best knowledge we can meet the 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 is this assumption is correct and second is

How to save the HTML 5 Canvas to a png image using javascript on a button click ? 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 have to convert your image to base64 format using Javascript:

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

now through PHP convert in to image and save it to server

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

That's all