How to save an HTML5 Canvas as Image on a server using PHP

Hi, In this tutorial, I am going to explain, How to save an HTML5 Canvas as Image on a server using PHP. Before going to this topic please refer "How to convert the HTML content into an image using jquery" in my previous post then you will get an idea how to generate the div content as an image.

Step 1: First Convert canvas image to URL format (base64)

var dataURL = canvas.toDataURL();

Step 2: After Send it to your server via Ajax

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 
});

Step 3: Now Save base64 on your server as an image using php code

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

Here you can download the Full Source code and check the demo.

Download Demo

* If you like this post please don't forget to subscribe TechiesBadi - programming blog for more useful stuff