MENU


Server Side Saving

toDataURL() inherently base64-encodes the image data, so it can be transmitted directly over an AJAX call. <br> To save the image data in the server, remove the header and base64-decode it first.<br> This method is crucial to capturing a snapshot from the webcam and saving it into the server.
RESETRUNFULL
<?php    // saveImage.php
$I = $_POST['imgData'];
$I = str_replace('data:image/png;base64,', '', $I);
$I = str_replace(' ', '+', $I);
file_put_contents("test.png",base64_decode($I));
?>

<!DOCTYPE HTML><html>
  <head></head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <br/>
    <script>
      var canvas = document.getElementById('myCanvas');
      var c = canvas.getContext('2d');
      c.beginPath();
         c.moveTo(100, 150);
         c.lineTo(450, 50);
         c.lineWidth=10;
         c.strokeStyle="#F00";
      c.stroke();
      var canvasData = canvas.toDataURL("image/png");
      xhr = new XMLHttpRequest();
      xhr.open('POST', '/shared/saveImage.php', false);
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xhr.send("imgData="+canvasData);
  </script>
  </body></html>