JavaScript drag and drop photo resizer cropper

Question

I have an image of arbitrary size on the page. As an output I need an image of a fixed size, say 90x120px. I would like the user to chose the area of the image by drag-and-dropping the big image behind the 90x120px 'window'. The window would specify the resulting image. Something like this is implemented at facebook image upload.

I know how to deal with the image at backend as soon as I get the cropping coordinates, no problem with that. I guess I need to post the cropping coordinates in hidden form fields. User's drag-and-dropping action should make JavaScript populate the fields, right? I am new to JS, so a step-by-step guide would help a lot.

Answer 1

1. Familiarize yourself with jQuery. It will save yourself time in any js/dhtml project
2. http://interface.eyecon.ro/demos/drag.html http://interface.eyecon.ro/demos/resize.html http://interface.eyecon.ro/download
3. ???
4. Profit

Answer 2

For cropping, use jQuery and Jcrop.