title: Cropping Image with Canvas
body: <p>I am trying to crop an image on the fly using canvas and get the base64 string to load into an element.  I was working with the example from <a href="https://stackoverflow.com/questions/26015497/how-to-resize-then-crop-an-image-with-canvas">this post</a> but when I run .toDataURL() the base64 I am getting is truncated and invalid.</p>
  
  <p>My <a href="https://jsfiddle.net/0cj3995w/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>var image = new Image(),
      canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');
  
  image.onload = function(){
      ctx.drawImage(image,
          70, 20,   // Start at 70/20 pixels from the left and the top of the image (crop),
          50, 50,   // "Get" a `50 * 50` (w * h) area from the source image (crop),
          0, 0,     // Place the result at 0, 0 in the canvas,
          50, 50); // With as width / height: 100 * 100 (scale)
  }
  
  image.src = 'https://www.google.nl/images/srpr/logo3w.png';
  
  var _img = document.getElementById('base64');
  _img.innerHTML += canvas.toDataURL();
  </code></pre>
  
  <p>From the toDataURL I am only getting 552 characters of base64.  When I save the cropped image and decode the image to base64 it is around 3.8k characters.</p>
  
  <p>I can't see what I am doing wrong - any ideas?</p>