imgAreaSelect Examples
Example 1: Tweaking the looks
There are seven options that control the look of the selection area:
borderColor1, borderColor2, borderWidth,
selectionColor, selectionOpacity,
outerColor, and outerOpacity. In the example
below, the selection color is set to blue, and border width to
2.
$(window).load(function () { $('#ladybug').imgAreaSelect({ selectionColor: 'blue', borderWidth: 2 }); });
Example 2: Width and height limits
The minWidth, minHeight, maxWidth and
maxHeight options allow you to place limits on the size of the
selection area. In this example, the maximum size of the
area is 200x150 pixels.
$(window).load(function () { $('#ladybug_ant').imgAreaSelect({ maxWidth: 200, maxHeight: 150 }); });
Example 3: Fixed aspect ratio
To make the selection area keep exact proportions, use the aspectRatio
option. Here it is set to "4:3".
$(window).load(function () { $('#lizard').imgAreaSelect({ selectionColor: 'green', aspectRatio: '4:3' }); });
Example 4: Callback functions
You can specify callback functions to be executed when selection starts
(onSelectStart), is resized/moved (onSelectChange),
and when it ends (onSelectEnd). In the code snippet below, an
onSelectChange callback function is used to implement a
simple selection area preview.
function preview(img, selection) { var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; $('#ferret + div > img').css({ width: Math.round(scaleX * 400) + 'px', height: Math.round(scaleY * 300) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); } $(document).ready(function () { $('<div><img src="ferret.jpg" style="position: relative;" /></div>') .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#ferret')); }); $(window).load(function () { $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); });
Example 5: Dynamically changing options
$(document).ready(function () { $('#red').click(function () { $('#duck').imgAreaSelect({ selectionColor: 'red' }); }); $('#green').click(function () { $('#duck').imgAreaSelect({ selectionColor: 'green' }); }); $('#blue').click(function () { $('#duck').imgAreaSelect({ selectionColor: 'blue' }); }); }); $(window).load(function () { $('#duck').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 }); });
