imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

  • Highly configurable
  • Customizable with CSS styling
  • Handles scaled images
  • Keyboard support for moving and resizing the selection
  • Supports callback functions
  • Provides API functions for easier integration with other application components
  • Lightweight — the packed version is just 8KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Live Example

Click and drag on the image to select an area.

Selection Preview

Coordinates Dimensions
X1: Width:
Y1: Height:
X2:
Y2:

» See more examples

Quick Usage Instructions

Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. Load the files in the <head> section of your HTML document.

<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  ...
</head>

Then, to enable selection on an image, wrap it in a jQuery object and call the imgAreaSelect() method:

<script type="text/javascript">
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
});
</script>

» Read documentation

Download

jquery.imgareaselect-0.9.10.zip – a zip archive containing the plugin source (packed version included), a minified version of jQuery, CSS and graphics files, and license text files.

For Developers

For web developers who want to extend/modify the plugin, here's a fully documented version of the source code:
jquery.imgareaselect.dev.js

License

Dual licensed under the MIT and GPL licenses.

Links

imgAreaSelect on jQuery Plugins

imgAreaSelect on GitHub

PHP & jQuery image upload and crop tutorial at WebMotionUK

Using imgAreaSelect and GD library to crop and create thumbnails at Leon Kessler's blog

AjaxCrop – Jquery and PHP Crop tool at Keith Levi Lumanog's blog

jQuery image upload and crop script with preview and resizing at Ephraim Härer's website