This is an updated version of Nathan White's MooTools-based image cropping tool. The original code and a live demo can be found at: http://www.nwhite.net/2009/02/25/lassocrop-preview
This version has been modified to upgrade it to MooTools 1.3+ (tested on MooTools 1.3.2, 1.4.5, 1.5.1, and 1.6.0), a few bug fixes, and also to add basic support for touchscreen devices.
HTML
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="lassocrop.js"></script>
...
<img src="/images/bee.jpg" id="bee" />
JS
new Lasso.Crop('bee', {
ratio : false,
preset : [20,20,300,300],
min : [50,50],
handleSize : 8,
opacity : .6,
color : '#7389AE',
border : 'crop.gif',
onResize : updateCoords,
onComplete : updateCoords
});
function updateCoords(coords) {
console.log(coords);
}
- element - An image element or ID
- options - See below
- min -
[w,h] / false
- sets the minimum lasso width and height, defaultfalse
- max -
[w,h] / false
- sets the maximum lasso width and height, defaultfalse
- ratio -
[16,9] / false
- sets a lasso aspect ratio constraint, defaultfalse
- preset -
[x,y,w,h]
- initial lasso size, defaultfalse
- contain -
true / false
- if set lasso will be contained within the image, defaulttrue
- border - hex color or image path - sets the border of the lasso, default
#999
- color - masking color, default
#7389AE
- opacity - opacity of mask, default
0.3
- zindex - used to make sure lasso is above all elements, default
100
- handleSize - size of lasso handles, default
8
- handleStyle - css styles for the lasso handles, see code for defaults
- attach - Attaches listeners
- detach - Detaches all listeners
- destroy - Removes the lasso component and restores the original image
- start - Event fired when lasso begins
- resize - Event fired during every mousemove while the lasso is active. Provides
{ x, y, w, h }
. Ifcontain
is set, positions are relative to the container element - complete - Event fired on mouseup. Provides
{ x, y, w, h }
. Ifcontain
is set, positions are relative to the container element
- You can click anywhere outside of the crop area to start a new crop
- If the handlers disappear then the crop is invalid (too small)
- If min and max are the same the lasso handles are removed
- N,S,E,W handles are removed for ratio constraints
- Marching ants lasso border requires a single 8×8 image (see
crop.gif
). Default border is1px dashed #999
- Preset option was added to help with usability, visual clue to communicate that you can crop