title: Image Select and Crop on Browser
body: <p>I've got a question. So I would like to make a web app that does this:</p>
  
  <ol>
  <li>allows user to select an image from his file system</li>
  <li>using a crop tool, select an area of the image that the user would like to crop</li>
  <li>preview the crop</li>
  <li>save the cropped image</li>
  </ol>
  
  <p>I have tried 2 approaches: the first one was to use HTML5 canvas. After a lot of finagling, I was able to select an image, crop it (crop tool coordinates are saved and the image is processed server side), preview it and submit it. </p>
  
  <p>But I had problems if I selected an image, cropped it, then chose to select another image and try cropping that. The previous image selection was messing with the new one.</p>
  
  <p>The second approach was to use JCrop. Using two example that were included on their website, I was able to use a crop tool to select an area, preview the crop in real time, and save the crop tool coordinates. </p>
  
  <p>But the problem here was that I can't use a user-uploaded image; the image url is hard coded in the img tag. When I tried to implement a solution that took a user's selection, the image never came up.</p>
  
  <p>So does anyone have a solution to these problems, or is aware of another technology that does what I need without any of the above issues? Please let me know. Thank you. </p>