title: Preview an image and crop it before it's uploaded
body: <p>I have a image upload button on my site. This is how I want it to behave:</p>
  
  <ol>
  <li>A user clicks a "Choose file" button and selects an image. </li>
  <li>The image shows before any submission (using javascript FileReader API)</li>
  <li>A cropping plugin is applied to that image, for instance: <a href="http://www.jqueryrain.com/?BEAlLLl9" rel="nofollow">http://www.jqueryrain.com/?BEAlLLl9</a></li>
  <li>The user chooses the cropping area and hits "Submit".</li>
  </ol>
  
  <p>I need help with the step between 2 and 3. The problem using FileReader API to show images right when they are selected is that hey get a src attribute which is base64 encoded. And the image cropping plugin I've used can't properly find/initialize/draw on the image since it won't recognize the <code>src=""</code> attribute as valid.</p>
  
  <p>How can I achieve step 1-4? Surely this has been done before on major sites like Facebook etc?</p>