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>
top | left |
aspect ratio |
height | width |
There are several keyboard functions: