title: I'm getting corrupted image when converting base64 image using webcam.js
body: <p>here's my html with javascript using webcam.js. I just followed the <a href="https://github.com/jhuckaby/webcamjs" rel="nofollow">https://github.com/jhuckaby/webcamjs</a> on how you will implement it using existing form.</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;WebcamJS Test Page&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body { font-family: Helvetica, sans-serif; }
          h2, h3 { margin-top:0; }
          form { margin-top: 15px; }
          form &gt; input { margin-right: 15px; }
          #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="results"&gt;Your captured image will appear here...&lt;/div&gt;
  
      &lt;h1&gt;WebcamJS Test Page&lt;/h1&gt;
      &lt;h3&gt;Demonstrates simple 320x240 capture &amp;amp; display&lt;/h3&gt;
  
      &lt;div id="my_camera"&gt;&lt;/div&gt;
  
      &lt;!-- First, include the Webcam.js JavaScript Library --&gt;
      &lt;script type="text/javascript" src="../webcam.js"&gt;&lt;/script&gt;
  
      &lt;!-- Configure a few settings and attach camera --&gt;
      &lt;script language="JavaScript"&gt;
          Webcam.set({
              width: 320,
              height: 240,
              image_format: 'jpeg',
              jpeg_quality: 90
          });
          Webcam.attach( '#my_camera' );
  
           Webcam.snap( function(data_uri) {
          var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
          document.getElementById('mydata').value = raw_image_data;
          document.getElementById('myform').submit();
      } );
      &lt;/script&gt;
  
      &lt;!-- A button for taking snaps --&gt;
       &lt;form id="myform" method="post" action="myscript.php"&gt;
          &lt;input id="mydata" type="hidden" name="mydata" value=""/&gt;
       &lt;input type=button value="Take Snapshot" onClick="take_snapshot()"&gt;
       &lt;input type="submit" value="submit"&gt;
      &lt;/form&gt;
  
      &lt;!-- Code to handle taking the snapshot and displaying it locally --&gt;
      &lt;script language="JavaScript"&gt;
          function take_snapshot() {
              // take snapshot and get image data
              Webcam.snap( function(data_uri) {
                  // display results in page
                  document.getElementById('results').innerHTML = 
                      '&lt;h2&gt;Here is your image:&lt;/h2&gt;' + 
                      '&lt;img src="'+data_uri+'"/&gt;';
              } );
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>here's the myscript.php to save the image. I successfully save the PATH in the database but I'm getting a corrupted .jpg file (file size always in 7 bytes).</p>
  
  <pre><code>&lt;?php
  include 'connect.php';
    $encoded_data = $_POST['mydata'];  // to get the base 64 code image link
    $name = base64_decode($encoded_data); // to convert base 64 code
    $name = date('YmdHis');
  $newname="images/".$name.".jpg";
  $file = file_put_contents( $newname, file_get_contents('php://input') );
  if (!$file) {
      print "Error occured here";
      exit();
  }
  else
  {
      $sql="INSERT INTO image (images) VALUES('$newname')";
      $result=mysqli_query($con,$sql);
      $value=mysqli_insert_id($con);
      $_SESSION["myvalue"]=$value;
  
  }
  
  $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
  print "$url\n";
  
  ?&gt;
  </code></pre>