Announcement: V2 plans & fund raising
Please take a moment to read my plans for version 2 of the cropper and how you can support it.
Details
| Version | 1.2.0 |
|---|---|
| Last updated | 30th October 2006 |
| Requirements |
|
| Demo | View demo page |
| Links | |
| License | BSD License |
| Changelog |
|
About
The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and script.aculo.us.
Initially I performed quite a lot of searching for some ready made solutions to meet my requirements, but found none that had the complete feature set that I required or any complete versions based on Prototype.
So after a week and a half of work, I present the JavaScript image cropper UI, built on Prototype & script.aculo.us.
Features
![]()
- Un-obtrusive
- Based on Prototype and script.aculo.us
- Image editing package styling & functionality, the crop area functions and looks like those found in popular image editing software
- Dynamic inclusion of required styles
- Drag to draw areas
- Shift drag to draw/resize areas as squares
- Selection area can be moved
- Selection area can be resized using resize handles
- Allows dimension ratio limited crop areas
- Allows minimum dimension crop areas
- Allows maximum dimensions crop areas, if both min & max set as the same value then we'll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
- Allows dynamic preview of resultant crop (if minimum width & height are provided), this is implemented as a subclass so can be removed if not required
- Movement of selection area by arrow keys (shift + arrow key will move selection area by 10 pixels)
- All operations stay within bounds of image
- All functionality & display compatible with most popular browsers supported by Prototype, tested in:
- PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
- MAC: Camino 1.0, Firefox 1.5, Safari 2.0
Usage
Extract to a directory of your choosing e.g. 'scripts/cropper/' and include the script and the required Prototype & script.aculo.us scripts:
-
<script type="text/javascript" src="scripts/cropper/lib/prototype.js" language="javascript"></script>
-
<script type="text/javascript" src="scripts/cropper/lib/scriptaculous.js?load=builder,dragdrop" language="javascript"></script>
-
<script type="text/javascript" src="scripts/cropper/cropper.js" language="javascript"></script>
Options
- ratioDim obj
- The pixel dimensions to apply as a restrictive ratio, with properties x & y.
- minWidth int
- The minimum width for the select area in pixels.
- minHeight int
- The mimimum height for the select area in pixels.
- maxWidth int
- The maximum width for the select areas in pixels (if both minWidth & maxWidth set to same the width of the cropper will be fixed)
- maxHeight int
- The maximum height for the select areas in pixels (if both minHeight & maxHeight set to same the height of the cropper will be fixed)
- displayOnInit int
- Whether to display the select area on initialisation, only used when providing minimum width & height or ratio.
- onEndCrop func
- The callback function to provide the crop details to on end of a crop.
- captureKeys boolean
- Whether to capture the keys for moving the select area, as these can cause some problems at the moment.
- onloadCoords obj
- A coordinates object with properties x1, y1, x2 & y2; for the coordinates of the select area to display onload
The callback function
The callback function is a function that allows you to capture the crop co-ordinates when the user finished a crop movement, it is passed two arguments:
- coords, obj, coordinates object with properties x1, y1, x2 & y2; for the coordinates of the select area.
- dimensions, obj, dimensions object with properities width & height; for the dimensions of the select area.
An example function which outputs the crop values to form fields:
-
function onEndCrop( coords, dimensions ) {
-
$( 'x1' ).value = coords.x1;
-
$( 'y1' ).value = coords.y1;
-
$( 'x2' ).value = coords.x2;
-
$( 'y2' ).value = coords.y2;
-
$( 'width' ).value = dimensions.width;
-
$( 'height' ).value = dimensions.height;
-
}
Basic interface
This basic example will attach the cropper UI to the test image and return crop results to the provided callback function.
Minimum dimensions
You can apply minimum dimensions to a single axis or both, this example applies minimum dimensions to both axis.
Select area ratio
You can apply a ratio to the selection area, this example applies a 4:3 ratio to the select area.
-
<img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
-
-
<script type="text/javascript" language="javascript">
-
Event.observe( window, 'load', function() {
-
new Cropper.Img(
-
'testImage',
-
{
-
ratioDim: {
-
x: 220,
-
y: 165
-
},
-
displayOnInit: true,
-
onEndCrop: onEndCrop
-
}
-
);
-
} );
-
</script>
With crop preview
You can display a dynamically produced preview of the resulting crop by using the ImgWithPreview subclass, a preview can only be displayed when we have a fixed size (set via minWidth & minHeight options). Note that the displayOnInit option is not required as this is the default behaviour when displaying a crop preview.
-
<img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
-
<div id="previewWrap"></div>
-
-
<script type="text/javascript" language="javascript">
-
Event.observe( window, 'load', function() {
-
new Cropper.ImgWithPreview(
-
'testImage',
-
{
-
previewWrap: 'previewWrap',
-
minWidth: 120,
-
minHeight: 120,
-
ratioDim: { x: 200, y: 120 },
-
onEndCrop: onEndCrop
-
}
-
);
-
} );
-
</script>
Known Issues
- Safari animated gifs, only one of each will animate, this seems to be a known Safari issue.
- After drawing an area and then clicking to start a new drag in IE 5.5 the rendered height appears as the last height until the user drags, this appears to be the related to another IE error (which has been fixed) where IE does not always redraw the select area properly.
- Lack of CSS opacity support in Opera before version 9 mean we disable those style rules, if Opera 8 support is important you & you want the overlay to work then you can use the Opera rules in the CSS to apply a black PNG with 50% alpha transparency to replicate the effect.
- Styling & borders on image, any CSS styling applied directly to the image itself (floats, borders, padding, margin, etc.) will cause problems with the cropper. The use of a wrapper element to apply these styles to is recommended.
- overflow: auto or overflow: scroll on parent will cause cropper to burst out of parent in IE and Opera when applied (maybe Mac browsers too) I'm not sure why yet.
Websites of Interest: SEO Agency advanced JavaScript experience can enhance your site functionality. Adding the JavaScript Image Cropper is a good way to improve the user experience.
Next Steps
Feature Requests & Bug Reports
Please check the existing list of feature requests & bugs and the discussion list before posting requests or reporting bugs.
Leave a Tip
If you find this code useful you can leave a donation towards the continued development & support.
Announcement: V2 plans & fund raising
Please take a moment to read my plans for version 2 of the cropper and how you can support it.

Comments
There have been 513 comments so far, join the discussion.
Pages: « 26 … 16 15 14 13 12 [11] 10 9 8 7 6 … 1 » Show All
220. Tejal - 16th Apr 2007 - 3:58 pm
Is this code is used for crop a some portion of site?
219. Dan - 16th Apr 2007 - 2:44 pm
It would be very nice if you could nudge the ‘size’ of the crop as well as the position. Something like:
CTRL+LEFT will make it smaller width
CTRL+SHIFT+LEFT will make it smaller width in bigger jump
CTRL+RIGHT will make it larger width
CTRL+SHIFT+RIGHT will make it larger width in bigger jump
CTRL+UP will make it smaller height
CTRL+SHIFT+UP will make it smaller height in bigger jump
CTRL+DOWN will make it larger height
CTRL+SHIFT+DOWN will make it larger height in bigger jump
Basically you are moving the right edge or the bottom edge.
218. Dan - 16th Apr 2007 - 2:37 pm
I am using crop with preview, but it appears the preview size is tied to the minWidth and minHeight of the crop. This is a shame, I cant have a large preview and a small minimum size which seems very strange.
Can you change it so that there is a specific previewWidth and previewHeight that we can set externally and still be able to have a smaller crop area.
Thanks
217. levi - 4th Apr 2007 - 3:51 pm
It seems that the code did’t appear right
so it was:
script src=”cropper/lib/prototype.js” type=”text/javascript”>var fake=null;
216. levi - 4th Apr 2007 - 3:48 pm
I think you already heard this many thimes, but here’s one more time: GREAT WORK!
I tried to integrate your script in a netbeans Visual Web Pack project. There where two problems I faced, here are the solutions:
1. The scripts have to be included in the following way(i think this is true for all VWP projects):
var fake=null;
var fake=null;
var fake=null;
2. You should use a plain GraphicImage component, and put it into a GroupPanel. Other ways the selection box won’t appear, or there could be problems with the position. If you put it into another type of panel then it’s the same bug what fialik wrote about.
215. Florian Grell - 3rd Apr 2007 - 3:38 pm
First of all: great work! I’ve seen quite a few image-cropping utilities but your solution is really nice (and doesn’t hurt my eyes).
What do you think of this feature: update the dimension/position info on Drag? So we could have a live update of how big our Croparea is and where it is (like in photoshop). That would really help.
[sorry, but english is not my first language]
214. Rainer Schleevoigt - 3rd Apr 2007 - 9:16 am
In my (german) example at http://familientagebuch.de/rainer/2006/50.html#5 is left a thumbnail and the imagemagick convert tools cut from the original size.
It is very easy and similar to http://familientagebuch.de/rainer/2007/09.html#i95
Best regards
Rainer from Hamburg/Germany
213. Dave - 3rd Apr 2007 - 8:59 am
Russ:
For now there are two options:
a) resize the image server side once uploaded before showing the cropper.
b) perform your own calculations based on the co-ords passed from the cropper and the dimensions of the image as shown on the cropper screen compared to it’s actual dimensions.
To allow the cropper to work out of the box for the scenario you described is on my list of things to do on the cropper.
212. Dave - 3rd Apr 2007 - 8:54 am
Darrell:
See bug number 00024, there was a comment here somewhere on how to fix it – basically the script is looking for the script tag for cropper.js in the HTML source to find the path for the CSS include.
211. Darrell Esau - 2nd Apr 2007 - 11:36 pm
Any reason why the uncompressed version doesn’t work? (the compressed version works [almost] fine for me .. but the compressed version doesn’t seem to work at all).
210. Russ Michaels - 2nd Apr 2007 - 5:08 pm
Gret tool, I have it doing almost everything I want. Combining it with imageCFC I can upload, crop and rotate the image.
But one other feature I need is that if a user uploads a big image, I need to resize it for display purposes only so it fits on the screen, but crop the true image.
So if for example they uploaded an image of 800×600, I would set the img display height and width as 400×300, but I need the crop to occur on the real dimensions of the image not the dimensions that they select on the page.
Any suggestions ?
209. Marta - 2nd Apr 2007 - 3:24 pm
Thank you for this amazing tool!
I have a couple of questions/problems about it.
1. I would like to crop again the same image (without using the remove() and reset() methods), but it seems it doesn’t work in IE7 (you can move the handles, but it doesn’t update coordinates). If I use either the remove() or reset() methods, I get an error, but the line of code indicated doesn’t exist. In FF works without a problem in both cases.
2. I would like to crop a new image, but the cropper still shows the previous one (although when the crop is made, it’s a piece of the new image).
I’m using the ImgWithPreview and a couple of functions to show and hide the div when called. I have an iframe which passes the URL of the image loaded to the showDiv function, and when the user presses the submit button for cropping the image, the hideDiv function passes the coordinates to the iframe which performs the cropping in PHP and shows the result in the iframe.
Thank you in advance for your help.
208. TheIceman5 - 30th Mar 2007 - 12:29 am
i have a problem with it when i use it in layers, “advanced layer popup” to be exact. http://www.dmxzone.com/ShowDetail.asp?NewsId=12769
when the crop script is put in the layer popup and run from there, when you go and crop the image in internet explorer 6 or 7 the crop area i like an xray and puts a hole through the layers to the page underneath. anyone give me any advice on how to correct this problem?
the demo above works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.
Full details are here in this thread on this forum below.
can anyone help me out here??
http://phpbuilder.com/board/showthread.php?t=10337256
207. Dave - 29th Mar 2007 - 4:24 pm
Caio:
I’ve not actually tried it in a table myself yet, but to me it sounds like a CSS issue.
206. Caio - 29th Mar 2007 - 3:34 pm
Yes, It is inside a table. I tested without table, just the img tag and it works. Is there a way to fix it? Because I won’t be able to modify the page structure.
Thanks for the “on-the-fly” answer and congrats for this app.
205. Caio - 29th Mar 2007 - 3:27 pm
By the way… the problem I reportted is for IE 7
204. Dave - 29th Mar 2007 - 3:25 pm
Caio:
Is your cropper inside a table, there have been reports of similar problems with the cropper when it’s inside tables.
203. Caio - 29th Mar 2007 - 3:00 pm
I’m having problems with IE.
I set my Event observe like this:
Event.observe(
‘testImage’,
‘click’,
function() {
new Cropper.Img(‘testImage’,{
minWidth: 10,
minHeight: 332,
onEndCrop: onEndCrop
});
});
So, when I click on the image (that have ID=”testImage”), crop works normally, but the image get blank. I can do everything that Cropper demos show, but the image is now a “white retangle”.
I noticed this bug just in IE… Firefox works perfectlly. What it can be?
Thanks!
202. Leif - 28th Mar 2007 - 9:12 pm
I found my answer through a previous post.
Thanks Adam B! Check out post #147.
I modified it a little bit for what I wanted, but this was just what I needed.
201. Yannick - 24th Mar 2007 - 12:31 am
I’m using the dojo toolkit and want to try Image Cropper on the same page.
It seems that these two libraries don’t work together…
(conflict between IC classes and dojo.io.IframeIO)
Anyone knows how to solve this issue ?
Thx !!
Leave a comment
No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)