title: Trying to save canvas data, file end up empty
body: <p>I am trying to upload from a canvas to a server with ajax but everytime I seem to be getting an empty image file of 879 bytes. I am not sure where I am going wrong. If somebody could have a look it would be most appreciated.</p>
  
  <pre><code>document.getElementById('input').addEventListener("change",function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    var output = document.getElementById('test');
    reader.onload = function () {
      var data = this.result;
      var img = new Image();
      img.src = data;
      img.onload = function() {
  var ctx = canvas.getContext("2d");
  output.innerHTML = 'width: ' + img.width + '\n' + 'height: ' + img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  
      };
    };
    reader.readAsDataURL(file);
    var canvasData = canvas.toDataURL("image/png");
  </code></pre>
  
  <p>Ajax below</p>
  
  <p>$.ajax({
      type: "POST",
      url: "upload_images.php",
      data: { canvasData:canvasData },
      success:function() {
      }
  });</p>
  
  <pre><code>$upload_dir = 'uploads/';  //implement this function yourself
  $img = $_POST['canvasData'];
  $img = str_replace('data:image/png;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = $upload_dir."image_name.png";
  $success = file_put_contents($file, $data);
  header('Location: '.$_POST['return_url']);
  </code></pre>