Description

Easy to use jQuery plugin for zoom & pan image cropping. This plugin is a complete rewrite of http://www.tmatthew.net/jwindowcrop

Demo

Visit: http://adriengibrat.github.com/jQuery-crop/

Usage

	// minimal
	$( 'img.crop' )
		.crop()
	;
	// typical
	$( 'img.crop' )
		.crop( {
			width    : 300
			, height : 300
		} )
		.on ( 'crop', function( event ) {
			console.log( $( this ).attr( 'id' ), 'x: '+ event.cropX );
		} )
	;
	// using mousewheel event
	$( 'img.crop' )
		.crop()
		.on( 'mousewheel', function ( event ) {
			var crop = $(this).data('crop');
			return event.originalEvent.wheelDelta < 0 ? 
				crop.zoomIn() :
				crop.zoomOut();
		} )
	;

Options

Option	Type	Default	Required	Description
width	integer	width attr or 320	no	Width in pixels of the cropping window
height	integer	height attr or 180	no	Height in pixels of the cropping window
zoom	integer	10	no	Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%
stretch	float	1	no	Maximum zoom ratio compared to image natural size (values > 1 could result to pixelated images)
controls	boolean/text	"Click to drag"	no	If false, no controls will appears. Otherwise controls and text appears on mouse hover

Event

To get crop results, bind a function on crop event.

	$( 'img.crop' )
		.on( 'crop', function ( event ) {
			console.log( event.cropX, event.cropY, event.cropW, event.cropH, event.stretch );
		} );

cropX, cropY, cropW, cropH, stretch (boolean) values are added to the event passed to this function.

Advanced

A reference to the crop object can be accessed like so:

	var crop = $( 'img.crop' ).data( 'crop' );

You then have access to all the properties and methods used for that specific element.