InVision jQuery EditImage plugin v1.0

Once an image is uploaded to the server it often needs adjustments such as cropping, resizing, etc.

Following samples show how an image can be cropped using the EditImage plugin.

The editImage plugin supports ajax for sending the crop request to the server side script, when the server responds, the image gets reloaded in its new portion and can be cropped again.

This functionality is not provided in this sample for security reasons.

Try out a few samples:

Sample 1: Image cropping

Click once on the image to start cropping and doubleclick it when done, to cancel press the ESC key. Move and resize the highlighted rectangle to the portion in which you want the image to be cropped.

Sample area

(click on the image to start cropping)

HTML

<img src='tools/samples/editimage.sample.png' id='sample1' />

Javascript

$('img#sample1').croppable({
	onCropComplete:function(l,t,w,h) {
		alert('Image cropped to dimensions '+ w + ', ' + h);
	}
});

Object methods

Methods included in the editImage plugin which can be applied/invoked on image elements. These methods can be used to be triggered by other elements on your page, for example if you want to use buttons to start or end cropping.

$('#image').croppable(options);
initializes the crop functionality over chosen image element

$('#image').cropStart();
Starts the cropping (displays the overlay)

$('#image').cropComplete();
Triggers the onCropComplete event 
or first sends the request to the server (when ajaxMode set to true)
and on server response triggers the onCropComplete event

#('#image').cropCancel();
Hides the cropping overlay.

Options and defaults

{
	ajaxMode:false,
	ajaxMethod:'post',
	ajaxURL:'editimage/editimage.php',
	ajaxOptions:{
		action:'crop',
		src:$image.attr('src'),
		left:0,
		top:0,
		width:$image.width(),
		height:$image.height()
	},
	ajaxDataType:'json',
	startOnReady:false,
	triggerElement:false, 
	triggerEvent:'click',
	completeElement:false, 
	completeEvent:'dblclick',
	confirmMessage:'Apply crop transformation?',
	onResizeStart:function() {},
	onResize:function() {},
	onResizeEnd:function() {},
	onMoveStart:function() {},
	onMove:function() {},
	onMoveEnd:function() {},
	onCropStart:function() {},
	onCropComplete:function(left,top,width,height) {},
	onCropCancel:function() {},
	tooltip:true,
	tooltipFormat:'{width} x {height} @ {left}, {top}',
	useKeys:true,
	completeKeyCode:13,
	cancelKeyCode:27,
	overlayWidth:Math.round($image.width()/2),
	overlayHeight:Math.round($image.height()/2),
	resolutionX:1,
	resolutionY:1,
	aspect:1
}

Requirements

The EditImage plugin requires following (versions last updated in 2009 at least):

jquery.js
jquery.event.drag.js
jquery.invision.resizeable.js
jquery.invision.editimage.js

All of the required scripts are already included in the download package. I suggest once you extract the editimage folder to your site root to copy-paste following code into your page/template:

<script src="editimage/js/jquery.js" type="text/javascript" ></script>
<script src="editimage/js/jquery.event.drag.js" type="text/javascript"></script>
<script src="editimage/js/jquery.invision.resizeable.js" type="text/javascript"></script>
<script src="editimage/js/jquery.invision.editimage.js" type="text/javascript"></script>

Version information

Version: 1.0
Last update: 10th January 2009

Download

Download jQuery EditImage plugin v1.0: