title: Upload HTML5 canvas as a blob
body: <p>I have a canvas, which I can paint to the DOM without a problem as well as save for the user locally using:</p>
  
  <pre><code>storCanvas.toBlob(function(blob) { saveAs(blob, name + ".png");});
  </code></pre>
  
  <p>(note: I've included canvas-toBlob.js for cross platform support, from <a href="http://eligrey.com/blog/post/saving-generated-files-on-the-client-side" rel="noreferrer">http://eligrey.com/blog/post/saving-generated-files-on-the-client-side</a>)</p>
  
  <p>Now, what I would like to do is send the same canvas element to the server. I thought I could do something like:</p>
  
  <pre><code>storCanvas.toBlob(function(blob) {upload(blob);});
  </code></pre>
  
  <p>where upload(blob); is:</p>
  
  <pre><code>function upload(blobOrFile)
  {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'upload_file.php', true);
      xhr.onload = function(e) { /*uploaded*/ };
  
      // Listen to the upload progress.
      var progressBar = document.querySelector('progress');
      xhr.upload.onprogress = function(e) {
          if (e.lengthComputable)
          {
            progressBar.value = (e.loaded / e.total) * 100;
            progressBar.textContent = progressBar.value;
          }
      };
      xhr.send(blobOrFile);
  
  }
  </code></pre>
  
  <p>(cribbed from: <a href="http://www.html5rocks.com/en/tutorials/file/xhr2/" rel="noreferrer">http://www.html5rocks.com/en/tutorials/file/xhr2/</a>)</p>
  
  <p>Now, I thought I this would work, but my PHP page (which I can do a POST to successfully using a standard HTML form) reports back (via firebug) that it got an invalid file of 0kB. I assume that the issue is in my conversion to a blob, but I'm not sure the correct way to go about it...</p>