How do I save HTML 5 Canvas as an image on the server?

PHP

Here you will see how to convert HTML content to image using jQuery. We know there are html2canvas plugins, with this plugin we can easily convert HTML content to image content, after which we can save this file by right clicking and selecting the option to save the image.After that we convert the CANVAS image to URL format and then to the server using ajax, after which the main part will be executed by the PHP code. The PHP code will save this image to your server.The following steps will illustrate the approach clearly.Step 1:HTML code to convert the canvas to an image. < html > < head > < title > < / title > < link rel = "stylesheet" href = " http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " > < script src = " https://ajax.googleapis.com/ajax/libs/ jquery / 1.12.4 / jquery.min.js " > < / script > < script src = " http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ js / bootstrap.min.js " > < / script > < script src = " https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ 0.4.1 / html2canvas.js " > < / script > < style > . top { margin-top: 20px; } h1 { color: green; } input { background-color: transparent; border: 0px solid; width: 300; } body { text-align: center; } < / style > < / head > < body > < div class = "col-md-offset-4 col-md-4 col - md-offset-4 top" > < div id = "createImg" style = "border: 1px solid;" > < h1 > GeeksforGeeks < / h1 > < h4 > How to save an HTML5 Canvas as an image on a server? < / h4 > < input type = "text" value = "" placeholder = "Enter wahtaever you want" class = "form-control" / > < br / > < / div > < button id = "engineer" type = "button" < / code> class = "btn btn-primary top" > Create Image < / button < / code> > < div id = "img" style = "display: none;" > < img src = "" id = "newimg" class = " top " / > < / div > < / div > < script > $(function() { $("# engineer"). click (function() { html2canvas ($(" # createImg "), { onrendered: function (canvas) { var imgsrc = canvas.toDataURL ("image / png"); console.log (imgsrc) ; $("# newimg"). attr (`src`, imgsrc); $("# img"). show(); var dataURL = canvas.toDataURL(); $. ajax ({ type: "POST", url: "script.php", data: { imgBase64: dataURL }  < / code> }). done (function (o) { console.log (` saved`); }); } }); }); }); < / script > < / body > < / html > Step 2:Output to screen output to make sure the canvas is successfully converted to an image.
  • Before the button is clicked:
  • After clicking the button:
Step 3:Convert the image to URL format using the canvas.toDataURL() method. < / p> var dataURL = canvas.toDataURL(); Step 4:Sending the converted URL format to your server via Ajax. $. ajax ({ type: "POST" , url: "script.php" , data: { imgBase64: dataURL } }). done ( function (o) { console.log ( ` saved` ); }); Step 5:This php -code will save the image on the server.  < / code> 
// Requires php5 define ( ` UPLOAD_DIR` , `images /` ); $img = $_ POST [ `imgBase64` ]; $img = str_replace ( `data: image / png; base64,` , `` , $img ); $img = str_replace ( `` , ` + ` , $img ); $data = base64_decode ( $img ); $file = UPLOAD_DIR. uniqid(). `.png` ; $success = file_put_contents ( $file , $data ); print $success ? $file : `Unable to save the file.` ;  
?>




Get Solution for free from DataCamp guru