I don't know how facebook does it, but I would use jquery-ui's resizeable()
and draggable()
methods. You could have the image set into a div the exact width of the image, and have a second draggable/resizeable div positioned on top of the image (using a higher z-index). That way, you have a semi-transparent crop area that the user can move around and adjust. You can set both methods to be constrained to the parent div, so they can't drag or resize beyond the image.
When they are ready to crop, the coordinates of each corner can be sent via ajax to the server. The server can then run whatever image cropper you have (in php I would use gmagic -> cropimage()
) and the task is done.
The tricky part is deciding how to show the user the finished product. I would definitly consider having the new cropped image stored in a tmp folder, in case they change their mind. But if you do that, you could have the ajax update the src of the image element so they can see what they've done. If they like it, they hit "save changes" and this sends another request via ajax to replace the original with the one in the tmp folder.
Antoher, kinda sleazy, option is to just use pxlr. They have a developer API that allows for calling their site's tools via javascript. You can customize the features the user sees and have it save to the "reffer" meaning back to your server. Not sure how to set up security for that, but I'm sure the site goes into it.