title: Convert image to Blob
body: <p>I want to upload image data to a php script on the server. I have a URL for an image source (PNG, the image might be located on a different server). I load this into a Javascript image, draw this into a canvas and use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob" rel="nofollow">canvas.toBlob()</a> method (or a polyfill as it is not mainly supported yet) to generate a blob holding the image data. This works fine, but I recognized that the resulting blob size is much bigger than the original image data.
  In contrast if I use a HTML File input and let the user select an image on the client the resulting blob has equal size to the original image. Can I get image data from a canvas that is equal to the original image size?</p>
  
  <p>I guess the reason is that I loose the PNG (or any image compression) when using the canvas.toBlob() polyfill:</p>
  
  <pre><code>value: function (callback, type, quality) {
  
      var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
          len = binStr.length,
          arr = new Uint8Array(len);
  
      for (var i=0; i&lt;len; i++ ) {
          arr[i] = binStr.charCodeAt(i);
      }
  
      callback(new Blob([arr], {type: type || 'image/png'}));
  }
  </code></pre>
  
  <p>I am confused by so many conversion steps via image, canvas, blob - so maybe there is an alternative to get the image data from a given URL and finally append it to FormData to send it to the server?</p>