title: save png to server using html2canvas
body: <p>I am using a method from <a href="http://developergang.com/convert-div-image-using-html2canvas-save-using-ajax-php/" rel="nofollow noreferrer">this tutorial</a> 
  to save a picture generated with html to a png or jpeg file in server.</p>
  
  <p>I suspect there is an error in the original script but cannot find it</p>
  
  <p>the picture should appear in the image_id div, but it does not.</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class='container' id="printableArea"&gt;
  ...here goes the div to output as png
  &lt;/div&gt;
  &lt;div id="image_id"&gt;
  &lt;img src="" alt="image" /&gt;
  &lt;/div&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"&gt;&lt;/script&gt;
  
  
       &lt;script&gt;
       html2canvas([document.getElementById('printableArea')], {
  
      onrendered: function (canvas) {
          var imagedata = canvas.toDataURL('image/png');
          var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
          //ajax call to save image inside folder}
          $.ajax({
              url: 'save_image.php',
              data: {
                     imgdata:imgdata
                     },
              type: 'post',
              success: function (response) {   
                 console.log(response);
                 $('#image_id img').attr('src', response)
  
          }
      });
      }
      &lt;/script&gt;        
  </code></pre>
  
  <p>the php file i use is the following: </p>
  
  <pre><code>&lt;?php 
  $imagedata = base64_decode($_POST['imgdata']);
  $filename = md5(uniqid(rand(), true));
  //path where you want to upload image
  $file = $_SERVER['DOCUMENT_ROOT'] . '/images/'.$filename.'.png';
  $imageurl  = 'http://***.com/images/'.$filename.'.png';
  file_put_contents($file,$imagedata);
  echo $imageurl;
  ?&gt;
  </code></pre>