What does this script do?

This script provides a basic functionality to draw crop areas on an image and to paste necessary size information into a form, which can then be posted to a server side script to crop an image to the specified size (e.g. using the PHP GD2 functions or by doing an ImageMagick call).

How do I use it?

The inclusion of the script itself works the usual way by calling it for example in the HEAD part of an HTML page:

<script type="text/javascript" src="imagecrop3.0.js"></script>

This script depends on a bit of HTML. First we need of course the input fields where the information about the upper right corner of the selected area as well as its height and width is pasted. These can be hidden input fields:

<input type="hidden" id="ic_top"/>
<input type="hidden" id="ic_left"/>
<input type="hidden" id="ic_height"/>
<input type="hidden" id="ic_width"/>

Also we need a DIV container, which marks the action area (the one with the checked pattern below). This area contains another DIV having the image to crop as background image.

By the way, an example styling of the HTML part can be seen in the ImageCrop stylesheet which also refers to the animated background image for the wand lines which makes it look like the well-known selections in various image processing programs.

<div id="actionarea" class="crosshair">
 <div id="crop" style="background-image:url(bild.jpg);height:123px;width:456px">
 </div>
</div>

Last but not least the script needs to be initialized. Therefore you create an instance of the lx_crop class with some ids as parameters. The first two parameters are the containers for the crop area and the action frame. The last 4 parameters mark the input fields in which the crop dimensions are pasted. Also the crop script needs to be activated.

<script type="text/javascript">
 crap = new lx_crop('crop','actionarea',
                    'ic_left','ic_top','ic_width','ic_height');

  crap.setActive(true);

By initializing the crop object and activating it explicitly by using setActive() it is possible to have more than one selection tool on the same page. You should pay attention to have only one active tool at the same time, though.

Last but not least you can define help texts for the different elements. Those texts will show in a little tooltip when hovering the specified area.

  crap.setI18Ntitle('Wand','click and drag to move selection');
 crap.setI18Ntitle('Act','click and drag to mark selection');
 crap.setI18Ntitle('resizers','click and drag to resize selection');
</script>

Demo

Restrictions

• drawing selections behaves funny if any parent element in the DOM tree has a special positioning (absolute, relative)

Notes

There are several keyboard functions:

• CURSOR KEYS move a selection around
• PGUP/PGDN resize current selection
• SHIFT with any of the above resizes/moves in bigger steps
• HOME select largest area possible
• ESC/DEL/END withdraw selection

Download script file

Version History

v3.0

• Note: this version is not entirely backwards compatible to version 2.x, for updating remove the first parameter, also the middle quadruple (see below) and also remove the wand and cover DIVs from the HTML part as these are created automagically now; setting a fixed aspect ratio is now done via a setter method and some styling has changed, too (old, new)
• Feature: wand area is created automatically and have not to be passed to the crop class (hence removed the first parameter)
• Feature: cover areas are created automatically and have not to be passed to the crop class (hence removed the middle quadruple of parameters)
• Feature: wand lines are created automatically and have not to be defined in HTML anymore
• Feature: post-resizing of selections via mouse pointer
• Feature: help texts can be defined to pop up when hovering certain areas
• Misc: possibly performance tweak: less event handling
• Misc: new method: setAspectRatio(), please use it instead of setting fixAspectRatio directly

v2.1

• Bugfix: key presses are correctly handled even if no action was possible
• Bugfix: selections with a height greater than width are now treated correctly when being resized

v2.0

• Note: this version is not backwards compatible to v1.x. If you don't want to use a bug fixed version without using the new API please use version 1.5 below. However the 1.x branch will not be maintained anymore.
• Misc: accumulated all functions in an object to allow for multiple instances on the same page and freely nameable input fields and elements
• Feature: maximizing a selection can now also be done by calling method maximizeSelection()
• Feature: predefining selections by calling method setSelection()
• Feature: scrolling while using cursor or page keys should be disabled now
• Misc: some minor performance improvements

v1.5

• Bugfix: drawing selection from bottom upwards now returns correct values
• Bugfix: undoing selection in the upper left corner does not return bad values

v1.4

• Feature: horizontal scrolling is now allowed
• Bugfix: positioning with keys returned wrong values
• Bugfix: shading of maximized selection after already drawing a selection
• Misc: better XHTML support

v1.3

• Feature: action frame

v1.2

• Bugfix: selection can be expanded to the top when document is scrolled
• Feature: selection can be finished when cursor is out of the image
• Feature: clear selection with DEL and ESC, too

v1.1

• Bugfix: moving without selection
• Bugfix: selection problem in Firefox
• Feature: moving and resizing the selection faster using the SHIFT key
• Feature: switched resizing the selection to PGUP/PGDN because of "find as you type" funtionality in some browsers
• Feature: biggest possible selection using HOME key
• Feature: clear selection using END key

v1.0

• first release as part of wwEdit CMS