title: save canvas image to server
body: <p>I'm trying to save the canvas image to the server.  I can save the file, but it's always 0 bytes.  What's wrong with my code?</p>
  
  <pre><code>&lt;script&gt;
  function test(){
  var canvas  = document.getElementById("cvs");
  var dataURL = canvas.toDataURL();
  
  $.ajax({
    type: "POST",
    url: "upload.php",
    data: { 
       imgBase64: dataURL
    }
  }).done(function(o) {
    console.log('saved'); 
  
  });
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>php:</p>
  
  <pre><code>&lt;?php    
  define('UPLOAD_DIR', 'uploads/');
  $img = $_POST['img'];
  $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.';
  ?&gt; 
  </code></pre>