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();"PUT",'testSave.php',true); // True is for async false
ajax.onreadystatechange = function() {
ajax.setRequestHeader('Content-Type', 'application/upload');

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.