title: How to save an HTML5 Canvas as an image on a server?
body: <p>I'm working on a generative art project where I would like to allow users to save the resulting images from an algorithm. The general idea is:</p>
  
  <ul>
  <li>Create an image on an HTML5 Canvas using a generative algorithm</li>
  <li>When the image is completed, allow users to save the canvas as an image file to the server</li>
  <li>Allow the user to either download the image or add it to a gallery of pieces of produced using the algorithm.</li>
  </ul>
  
  <p>However, I’m stuck on the second step. After some help from Google, I found this <a href="http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/" rel="noreferrer">blog post</a>, which seemed to be exactly what I wanted:</p>
  
  <p>Which led to the JavaScript code:</p>
  
  <pre><code>function saveImage() {
    var canvasData = canvas.toDataURL("image/png");
    var ajax = new XMLHttpRequest();
  
    ajax.open("POST", "testSave.php", false);
    ajax.onreadystatechange = function() {
      console.log(ajax.responseText);
    }
    ajax.setRequestHeader("Content-Type", "application/upload");
    ajax.send("imgData=" + canvasData);
  }
  </code></pre>
  
  <p>and corresponding PHP (testSave.php):</p>
  
  <pre><code>&lt;?php
  if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
    $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
    $filteredData = substr($imageData, strpos($imageData, ",") + 1);
    $unencodedData = base64_decode($filteredData);
    $fp = fopen('/path/to/file.png', 'wb');
  
    fwrite($fp, $unencodedData);
    fclose($fp);
  }
  ?&gt;
  </code></pre>
  
  <p>But this doesn’t seem to do anything at all.</p>
  
  <p>More Googling turns up this <a href="http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/" rel="noreferrer">blog post</a> which is based off of the previous tutorial. Not very different, but perhaps worth a try:</p>
  
  <pre><code>$data = $_POST['imgData'];
  $file = "/path/to/file.png";
  $uri = substr($data,strpos($data, ",") + 1);
  
  file_put_contents($file, base64_decode($uri));
  echo $file;
  </code></pre>
  
  <p>This one creates a file (yay) but it’s corrupted and doesn’t seem to contain anything. It also appears to be empty (file size of 0).</p>
  
  <p>Is there anything really obvious that I’m doing wrong? The path where I’m storing my file is writable, so that isn’t an issue, but nothing seems to be happening and I’m not really sure how to debug this.</p>
  
  <h3>Edit</h3>
  
  <p>Following Salvidor Dali’s link I changed the AJAX request to be:</p>
  
  <pre><code>function saveImage() {
    var canvasData = canvas.toDataURL("image/png");
    var xmlHttpReq = false;
  
    if (window.XMLHttpRequest) {
      ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    ajax.open("POST", "testSave.php", false);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function() {
      console.log(ajax.responseText);
    }
    ajax.send("imgData=" + canvasData);
  }
  </code></pre>
  
  <p>And now the image file is created and isn’t empty! It seems as if the content type matters and that changing it to <code>x-www-form-urlencoded</code> allowed the image data to be sent.</p>
  
  <p>The console returns the (rather large) string of base64 code and the datafile is ~140 kB. However, I still can’t open it and it seems to not be formatted as an image.</p>