adriengibrat / jquery-crop

Image Cropping jQuery Plugin

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.

jquery-crop's Issues

cropping with bootstrap

Hi,
Have you ever tried enabling this plugin with bootstrap framework?
The responsive image setup with bootstrap seems to interfere with jquery resizing the image.
I setup 2 fiddles to show you.

http://jsfiddle.net/sr3hw/ - works as expected

http://jsfiddle.net/MCqea/ - not working with bootstrap enabled

jQuery-crop scroll issue in firefox!

// zoom on scroll
image
.on( 'mousewheel', function ( event ) {
return event.originalEvent.wheelDelta < 0 ?
crop.zoomIn() :
crop.zoomOut();
} );

This is not working in firefox. In all other browsers this is working fine.

IE8 and IE9 initializing crop via ajax

Hi there,

There seems to be an issue with crop in IE8 and 9. Works great everywhere else. I have a system where the user uploads an image and then afterwards they pick the crop position and zoom they want on the image (essentially creating a profile pic).

I call crop as follows after a success message from my ajax upload script. It looks like this

$("#my-mask").html("img class="crop" src="assets/large/" + obj.msg + ""/");

                    $( '.crop' ).each( function () {
                        var image     = $( this )
                            , crop    = image
                                .crop( {
                                    width      : 220
                                    , height   : 220
                                    , loading  : '.....'
                                    , controls : 'Drag to move, scroll to zoom'
                                } )
                                .on( 'crop', function( event ) {
                                    $('#crop_x').val( event.cropX );
                                    $('#crop_y').val( event.cropY );
                                    $('#crop_w').val( event.cropW );
                                    $('#crop_h').val( event.cropH );

                                    $('.cropX').text( event.cropX );
                                    $('.cropY').text( event.cropY );
                                    $('.cropW').text( event.cropW );
                                    $('.cropH').text( event.cropH );
                                } )
                                .data( 'crop' );
                        image
                            //.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
                            .on( 'mousewheel', function ( event ) {
                                return event.originalEvent.wheelDelta < 0 ? 
                                    crop.zoomIn() :
                                    crop.zoomOut();
                            } );
                    } );

My mask is the div where I put the image in for people to see and move around.

For some reason in IE8 and 9 - the image appears - the controls are there - but nothing works and does a weird scaling to the image leaving a big gap at the bottom. Also it always updates crop x and y as 0 each and crop w and crop h as 28 each.

Screen shot attached:

Any ideas?

How can destroy() ?

disable max zoom?

Thanks for this plugin, I have been using it for a while, and even adapted it to use a jquery ui slider instead of the buttons.

An "issue" I'm facing now is if I have { width: 200, height:200 } and the user uploads an image that is <= 200 x 200 the zoom controls do nothing because minPercent is already >= 1.

The other scenario that makes the behavior strange is if the user uploads an image @ 210x210. the click controls only zoom 1px per click (assuming { step:10 } ).

Even though images would get pixelated, I think I'd like to allow them to zoom past minPercent.

Any thoughts on a tweak to allow this?

thanks

touch support?

I tried this on my tablet, and the widget doesn't seem to work.

Are there plans to make pan/zoom work with touch controls? (i.e. pinch-zoom instead of scroll, and touchmove instead of dragging).

multiple image sizes

Is there a way to have multiple images with different sizes? I basically have 2 images on the page. One is 185px x 185px and the other one is 830px x 300px. It appears that when both are loaded, the first image takes the dimensions of the second image. Both images become 830 x 300.

Also, how do I make the plugin work when I load images dynamically? When I load the images dynamically, the zoom in / out no longer work.

Thanks.