Image Cropping and Scaling in your Browser

We're working on a new community-driven website and one of the required features is the ability for users to crop and scale an uploaded image live in their browser. I put together a short javascript that takes an uploaded image and places it within a set frame size, scaling the smallest side of the image to the largest side of the frame. The user can then pan and scale the image to the desired size, clicking enter when done. All adjustments are placed in hidden form inputs that way when the form is submitted the backend image library (GD, ImageMagick, etc.) will have all the proper measurements to make the desired adjustments. It looks a little something like this: The bar below the image is used to size the image and the inputs on the side are what receive the new adjustment data (displayed as text inputs for the example). You can play with the example and download the source here. This script requires the latest Prototype and Scriptaculous libraries (it will not work on Prototype < 1.6)