title: Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
body: <p>Is there any way of reading the contents of a HTML Canvas as binary data?</p>
  
  <p>At the moment I've got the following HTML to show an input file and the canvas below it:</p>
  
  <pre><code>&lt;p&gt;&lt;button id="myButton" type="button"&gt;Get Image Content&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;Input:&lt;input id="fileInput" type="file"/&gt;&lt;/p&gt;
  &lt;p&gt;Canvas&lt;canvas id="myCanvas" width="578" height="200"/&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I've then setup my input file to set the canvas correctly which works fine:</p>
  
  <pre><code>$('#fileInput').on('change', function() {
      $.each(this.files, function() {
          var image = new Image();
              image.src = window.URL.createObjectURL(this);
  
          image.onload = function() {
              $("canvas").drawImage({
                  source: image,
                  x: 50, y: 50,
                  width: 100,
                  fromCenter: false
              });
          };
      });
  });
  </code></pre>
  
  <p>I now need to get the binary data (Base64 encoded) from the Canvas when the button is clicked so it'll push the data to the server...</p>
  
  <p>The end result is that I need to provide the user with the ability to select a file, crop/resize it, and then click a button at which point the edited image will be uploaded to the server (I can't do server-side cropping/resizing due to server-side limitations...)</p>
  
  <p>Any help would be great! Cheers</p>