imgAreaSelect
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.
Example
Click and drag on the image to select a rectangular area.
Selection coordinates:
X1:
Y1:
X2:
Y2:
Selection dimensions:
Width:
Height:
Usage
Download the script, unzip it, and place it
in the <head> section of your HTML document:
<head> ... <script type="text/javascript" src="jquery.imgareaselect-0.3.js"></script> ... </head>
Then, to enable selection on an image, use the imgAreaSelect
method:
<script type="text/javascript"> $(window).load(function () { $('img#example').imgAreaSelect({ selectionColor: 'blue', onSelectEnd: someFunction }); }); </script>
The argument passed to the method is an options object. The available options are:
aspectRatio |
a string of the form "width:height" which represents
the aspect ratio to maintain example: "4:3"
|
autoHide |
if set to true, selection area will disappear
when selection endsdefault: false
|
borderColor1 |
selection border color default: black
|
borderColor2 |
selection border color default: white
|
borderWidth |
selection border width (in pixels) default: 1
|
hide |
if set to true, selection area is hidden
|
maxHeight |
maximum selection height (in pixels) |
maxWidth |
maximum selection width (in pixels) |
minHeight |
minimum selection height (in pixels) |
minWidth |
minimum selection width (in pixels) |
movable |
determines whether the selection area should be movable default: true
|
resizable |
determines whether the selection area should be resizable default: true
|
selectionColor |
selection area color default: white
|
selectionOpacity |
selection area opacity default: 0.2
|
show |
if set to true, selection area is shown
|
x1y1 |
coordinates of the top left corner of the initial selection area |
x2y2 |
coordinates of the bottom right corner of the initial selection area |
onSelectStart |
callback function called when selection starts |
onSelectChange |
callback function called when selection changes |
onSelectEnd |
callback function called when selection ends |
The callback functions (onSelectStart,
onSelectChange, and onSelectEnd)
are passed two arguments. First argument is a reference to the image,
the second is an object representing the selection.
The object has six properties:
x1y1 |
coordinates of the top left corner of the selected area |
x2y2 |
coordinates of the bottom right corner of the selected area |
width |
selection width |
height |
selection height |
Here's an example of a callback function that might be executed on selection end:
function selectionEnd(img, selection) { alert('width: ' + selection.width + '; height: ' + selection.height); }
If you call the imgAreaSelect method again with a
new set of options, the new options are applied dynamically to the
existing selection. For example, the following code could be used
to implement a button that toggles the selection area on every click:
$('button#toggle').toggle( function () { $('img#example').imgAreaSelect({ show: true }); }, function () { $('img#example').imgAreaSelect({ hide: true }); } );
Known Issues
Move/resize cursors are not displayed correctly in Opera (and I have no clue why this happens — any Opera experts out there willing to help?).
Download
imgareaselect-0.3.zip – a zip archive containing the plugin source and license files. Minified version included.
License
Dual licensed under the MIT and GPL licenses.