title: How do I generate a thumbnail client-side in a modern browser?
body: <p>I'm looking for an elegant way to generate a thumbnail for use with the <a href="http://www.w3.org/TR/FileAPI/" rel="noreferrer">FileAPI</a>. Currently I get a <a href="http://www.w3.org/TR/FileAPI/#readAsDataURL" rel="noreferrer">DataURL</a> representing an image. Problem is, if the image is very large, than moving it around and rerendering it becomes CPU intensive. I can see 2 options to get around this.</p>
  
  <ul>
  <li>Generate a thumbnail on the client</li>
  <li>Generate a thumbnail on the server, send the thumbnail back to the client (AJAX).</li>
  </ul>
  
  <p>With <code>HTML5</code> we have a <code>canvas</code> element? Does anyone know how to use it to generate thumbnails from pictures? They don't have to be perfect -- sampling quality is acceptable. Is there a <code>jQuery</code> plugin that will do this for me? Are there any other way to speed up the clientside use of large images?</p>
  
  <p>I'm using <code>HTML5</code>, and <code>Firefox 3.6+</code>: there is no need to support anything other than <code>Firefox 3.6+</code>, please don't provide suggestions for <code>IE 6.0</code></p>