Skip to content

Updated version of Nathan White's MooTools-based image cropping tool

License

Notifications You must be signed in to change notification settings

quru/lasso.crop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lasso.Crop

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.

Example

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);
}

Documentation

Lasso.Crop constructor arguments

  • element - An image element or ID
  • options - See below

Options

  • min - [w,h] / false - sets the minimum lasso width and height, default false
  • max - [w,h] / false - sets the maximum lasso width and height, default false
  • ratio - [16,9] / false - sets a lasso aspect ratio constraint, default false
  • preset - [x,y,w,h] - initial lasso size, default false
  • contain - true / false - if set lasso will be contained within the image, default true
  • 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

Methods

  • attach - Attaches listeners
  • detach - Detaches all listeners
  • destroy - Removes the lasso component and restores the original image

Events

  • start - Event fired when lasso begins
  • resize - Event fired during every mousemove while the lasso is active. Provides { x, y, w, h }. If contain is set, positions are relative to the container element
  • complete - Event fired on mouseup. Provides { x, y, w, h }. If contain is set, positions are relative to the container element

Things to note

  • 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 is 1px dashed #999
  • Preset option was added to help with usability, visual clue to communicate that you can crop

About

Updated version of Nathan White's MooTools-based image cropping tool

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published