title: file_put_contents save a corrupted image [base64]
body: <p>I'm working with AJAX, and I sent a request with POST, in that request I sent a canvas generated image (dataURL). When request is finished, returns in console the generated image in <strong>base64</strong>. I take all string of image data and I go to a webpage (<a href="https://codebeautify.org/base64-to-image-converter" rel="nofollow noreferrer">https://codebeautify.org/base64-to-image-converter</a>), in that page I put the image data, and well I get a the image generated perfectly.</p>
  
  <p><a href="https://i.stack.imgur.com/0gYco.png" rel="nofollow noreferrer">Image Data in base64 to image converter</a></p>
  
  <p>The problem is that the function <em>file_put_contents</em> writes a corrupted file. (In addition, the file weighs more than 0 bytes).</p>
  
  <p><a href="https://i.stack.imgur.com/TkMOi.png" rel="nofollow noreferrer">Corrupted file in save path</a></p>
  
  <p>Well, I don't have any idea what I do wrong. Finally, here is the code and sorry for my bad english. Thanks :)</p>
  
  <p><em>uploadThumbnail.php</em></p>
  
  <pre><code>&lt;?php
  session_start();
  $img = $_REQUEST['imgBase64'];
  $img = htmlspecialchars($img);
  echo $img;
  file_put_contents("../thumbnails/" . $_SESSION['uploadedVideoID'] .'.png', 
  base64_decode($img));
  ?&gt;
  </code></pre>
  
  <p>And, <em>Caller script</em>.</p>
  
  <pre><code>function generateThumbnail() {    
  
  var thecanvas = document.getElementById('taco');
  var context = thecanvas.getContext('2d');
  context.drawImage(video, 0, 0, 256, 144);
  var dataURL = thecanvas.toDataURL();
  
  //create img
  var img = document.createElement('img');
  img.setAttribute('src', dataURL);
  
  //append img in container div
  document.getElementById('videoThumbnailContainer').appendChild(img);
    $.ajax({
      type: "POST",
      url: "upload/uploadThumbnail.php",
      data: { 
         imgBase64: dataURL
      }
    }).done(function(o) {
      console.log(o); 
  });
  
  }
  </code></pre>