HTML5 Save Canvas as Image

HTML5 Save canvas source as Image

To save canvas source as a image we will need the following javascript code. First we need to get the canvas source then we send the source to server and save it on server.


var canvas = document.getElementByID('canvas'),
    canvasData = canvas.toDataURL("image/png"),
    ajax = new XMLHttpRequest();

ajax.open("PUT",'testSave.php',true); // True is for async false
ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
}
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);

Here we are sending canvas data to server script named “testSave.php”.

you can check the PHP script Here to see how to handle request on server side.