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.

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.

• javascript
• image
• resize
• photo
• crop

• So how did you do the dragging with a big picture behind a small predefined box? Most projects seem to think I want to drag a crop-box inside the image, but I want the opposite. – odinho - Velmont Commented Aug 21, 2011 at 9:09

2 Answers 2

For cropping, use jQuery and Jcrop.

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