Change language

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

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"  class = "btn btn-primary top" > Create Image < / button > < 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 }   }). 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.

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.   
// 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.’ ;  
?>

Shop

Best laptop for Sims 4

$

Best laptop for Zoom

$499

Best laptop for Minecraft

$590

Best laptop for engineering student

$

Best laptop for development

$

Best laptop for Cricut Maker

$

Best laptop for hacking

$890

Best laptop for Machine Learning

$950

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method