title: How to compress an image via Javascript in the browser?
body: <p><strong>TL;DR;</strong></p>
  
  <p>Is there a way to compress an image (mostly jpeg, png and gif) directly browser-side, before uploading it ? I'm pretty sure JavaScript can do this, but I can't find a way to achieve it.</p>
  
  <p><br />
  Here's the full scenario I would like to implement:</p>
  
  <ul>
  <li>the user goes to my website, and choose an image via an <code>input type="file"</code> element,</li>
  <li>this image is retrieved via JavaScript, we do some verification such as correct file format, maximum file size etc,</li>
  <li>if every thing is OK, a preview of the image is displayed on the page,</li>
  <li>the user can do some basic operations such as rotate the image by 90°/-90°, crop it following a pre-defined ratio, etc, or the user can upload another image and return to step 1,</li>
  <li>when the user is satisfied, the edited image is then compressed and "saved" locally (not saved to a file, but in the browser memory/page),-</li>
  <li>the user fill a form with data like name, age etc,</li>
  <li>the user click on the "Finish" button, then the form containing datas + compressed image is sent to the server (without AJAX),</li>
  </ul>
  
  <p>The full process up to the last step should be done client side, and should be compatible on latest Chrome and Firefox, Safari 5+ and <strong>IE 8+</strong>. If possible, only JavaScript should be used (but I'm pretty sure this is not possible).</p>
  
  <p>I've not code anything right now, but I've thought about it already. File reading locally is possible via <a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/">File API</a>, image previewing and editing could be done using <a href="http://www.html5rocks.com/en/tutorials/canvas/integrating/">Canvas</a> element, but <strong>I can't find a way to do the image compression part</strong>.</p>
  
  <p>According to <a href="http://html5please.com/">html5please.com</a> and <a href="http://caniuse.com/">caniuse.com</a>, supporting those browser is quite hard (thanks to IE), but could be done using polyfill such as <a href="http://flashcanvas.net/">FlashCanvas</a> and <a href="https://github.com/Jahdrien/FileReader">FileReader</a>.</p>
  
  <p>Actually, the goal is to reduce file size, so I see image compression as a solution. But, I know that uploaded images are going to be displayed on my website, every time at the same place, and I know the dimension of this display area (eg. 200x400). So, I could resize the image to fit those dimensions, thus reducing file size. I have no idea what would be the compression ratio for this technique.</p>
  
  <p>What do you think ? Do you have any advice to tell me ? Do you know any way to compress an image browser-side in JavaScript ? Thanks for your replies.</p>