Editing a picture / inplace "moving" (a la Facebook profile picture editing)

How does facebook do inplace "moving" about of profile pictures?

To see what I'm talking about, goto: http://www.facebook.com/editprofile.php?sk=picture --> Ed开发者_运维问答it Thumbnail --> Notice that you can move the thumbnail picture about.

They're calling it "ProfilePicSquareEditor" (their source code is hard to get at)

This is not exactly what Facebook uses but it does the trick very well http://odyniec.net/projects/imgareaselect/

I'm currently using it in a couple of projects.

Obviously there's a bunch of javascript to control the drag resizing of the crop window, which can get a little complex (or at least tedious) if you're enforcing a certain aspect ratio (or range), but as far as the HTML is concerned, it's simply a black background div with the full image sitting on top of that at opacity: .5 (this created the darkened background image), then another copy of the same image sitting in an position: absolute div (which is outside of that first div) so it lines up correctly with the first image. A handler that responds to the drag events of the resize handles continuously updates the top, left, width and height properties of the absolutely positioned div (the 'crop window'), and also the top and left properties (into the negative) of the 'foreground' image inside it to keep it aligned with the background image.

The javascript would also keep track of the position of each corner, so when the user accepts the changes, those points can be translated into pixel coordinates (taking any scaling into consideration) and fed to whatever image processing library is on the backend.