I wrote a YUI-based image cropper widget that allows you to easily select which region of an image you’d like to crop. This widget works on all A-grade browsers in both standards mode and quirks mode. Attached is a screenshot.
To instantiate the widget, include the following source files in your web page (requires YUI >= 2.3)
<!-- CSS --> <link rel="stylesheet" type="text/css" href="image-cropper.css"> <!-- Dependencies --> <script src="yahoo-dom-event.js"></script> <script src="dragdrop-min.js"></script> <!-- Image cropper source file --> <script src="image-cropper-min.js"></script>
Then, place an image on your page:
<img src="myImage.jpg" id="myImageId">
Finally, instantiate the widget:
<script> var cropper = new YAHOO.widget.ImageCropper("myImageId"); </script>
You can then retrieve the geometry of the crop region by calling:
var region = cropper.getCropRegion();
This should work right out of the box. You can also pass an optional configuration object to the constructor to set the initial geometry of the crop region as well as a constraint on the ratio width / height. For more information, please refer to the documentation inline in the source code.
Here is a live demo of the image cropper widget. You can also download an archive containing all the necessary source code.