Image Cropping jQuery Plugin
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 53 commits ahead, 6 commits behind tybro0103:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
beach.jpg
dock.jpg
index.html
jquery.crop.css
jquery.crop.js

README.md

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
widthintegerwidth attr
or 320
no Width in pixels of the cropping window
heightintegerheight attr
or 180
no Height in pixels of the cropping window
zoominteger10no Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%
stretchfloat1no Maximum zoom ratio compared to image natural size (values > 1 could result to pixelated images)
controlsboolean/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.