Details
| Version | 1.2.2 |
|---|---|
| Last updated | 4th July 2011 |
| 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=effects,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.
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.
Comments
There have been 750 comments so far, join the discussion.
Pages: « 1 … 5 6 7 8 9 10 [11] 12 13 14 15 » Show All
501. TheIceman - 22nd Jul 2008 - 12:59 pm
@shivakumari,
1. IM not going to spend 5 months writing an essay explaining how to do this
2. Spend a few years at university/TAFE studying javascript and a web programming language
3. search google for a script already done
4. search here for a script that is almost doing what you want it to.
5. dont ask too much from a free script.
6. pay someone else to do it for you
502. Dave - 22nd Jul 2008 - 1:02 pm
shivakumari:
I’m afraid that is really outside what the cropper UI is and explaining it here would take quite a while. I suggest you start by looking at the FAQ for how to save the cropped image, moving from there to saving it in a DB should be a matter of doing a little bit of research.
503. Vadluri Sreenu - 1st Aug 2008 - 3:47 pm
hi,its working fine,but i have a problem here.
when ever i saw the preview of the cropped area, i want to save that cropped image in my server.
what can i do?
please help me
thanks in advanced
504. Dave - 1st Aug 2008 - 4:07 pm
Vadluri:
Please read the FAQ’s which are linked to in the information box at the top of the post.
505. Sanjay - 15th Aug 2008 - 3:19 pm
Great code. I’m using it with some .NET server-side code for the complete image cropping solution. Again, nice job…
506. Sarah Davis - 16th Aug 2008 - 2:31 pm
Hi David, I have the same problem as Christopher (comment 444) if you load the image using AJAX more than once the actual event doesn’t get removed from the first time load and keep calling the onEndCrop while keep bringing the old cords values, any idea how to manually remove the call on DOM object removal perhaps?
Thanks,
Sarah
507. Dave - 16th Aug 2008 - 9:18 pm
Sarah: Are you removing the cropper with the remove method before adding a new one? If you are can you ask this question on the google group , then we can discuss it in more detail with code samples etc.
508. Sarah Davis - 16th Aug 2008 - 9:46 pm
David, you are right, I only used to dispose the object from DOM without the remove fucntion.
Now its working perfectly. Many thanks for this amazing code.
s.
509. Scott - 29th Aug 2008 - 10:55 pm
Your control is an awesome hack! Nicely done. I’m using it to create an online video editor that creates ringtones, video thumbnails, avatars and more. Why? My daughter wanted a video ringtone from a YouTube video :-)
510. cws - 31st Aug 2008 - 4:25 am
thanks a lot, it is powerful and easy to use! Thank you very much!
511. Guenter - 3rd Sep 2008 - 10:30 am
You probably allready noticed: the cropper doesn’t work in the new google browser.
512. Guenter - 3rd Sep 2008 - 1:19 pm
I just noticed, that cropper seems to work on Google Crome. So it must be my implementation, which works fine on IE, FF and others I tested.
In my implementation, I’m grabbing a frame out of a flv video using ffmepg. The grabbed image is inserted into the website using js and right after that the cropper function is activated. This is why I can’t use the event.observe function, as the element is not available at page initialisation.
However on Google Crome the Cropper doesn’t show up and I have no idea what might be the problem. I must admit though, that I’m not much into js.
Maybe someone could check this out:
http://www.digitalproduction.com/grab
play the video, stop at some point and press the calculate button.
Thanks,
Guenter
513. Jimmy - 3rd Sep 2008 - 1:44 pm
Hi Guenter
I’ve posted your comments to Google Groups, which is where discussion is now taking place.
http://groups.google.com/group/javascript-image-cropper-ui
514. Noel - 7th Sep 2008 - 2:35 am
I left a remark a day or so ago, but I don’t see it here. Anyway, I think this is great. I’ve used it in a aspx page using VB. I’m not schooled coder. I learn as i go. When I was in school, there wasn’t a www, just vw’s. I hope you continue to build on this. I hope to chuck a buck or two towards it after i pay my property taxes.
515. Graham - 8th Sep 2008 - 3:39 pm
Hi, great script.
Is there a way to combine dynamic image version with preview version?
Thanks.
516. John Ellmore - 9th Sep 2008 - 2:12 am
This is absolutely excellent, and it works perfectly. I used it in a custom CMS I built for a non-profit, and they were extremely happy at the usability of it.
Made a donation, thanks again!
517. Dave - 13th Sep 2008 - 6:51 pm
Guenter:
I’ve just got back from holiday so I haven’t had chance to try Google chrome though, if you’re still having issues get in touch via the contact section and we’ll try and work it out.
Graham:
You won’t be able to combine the dynamic image version with the preview version as the preview version doesn’t get removed properly when you remove the cropper.
John:
Thanks for the donation, always appreciated.
518. Dave - 13th Sep 2008 - 6:54 pm
Jimmy:
Thanks for moving that question to the Google Group, sorry that the spam filter picked it up to be moderated and I didn’t notice while I was away.
519. Graham - 15th Sep 2008 - 8:34 pm
Thanks for getting back to me Dave :-)
Shame we can’t combine the scripts.
520. Dave - 15th Sep 2008 - 8:36 pm
Graham:
It’s on my list of things to do for elusive version 2.0
521. Graham - 15th Sep 2008 - 9:09 pm
Dave, when I include the scripts on my own site they dont work, it only works when I link to yours….any idea why?
522. Dave - 15th Sep 2008 - 9:22 pm
Graham:
I have moved this question to the Google group.
523. Graham - 15th Sep 2008 - 9:56 pm
OK Never mind, it was to do with teh fact that the page IM using this on is in an iframe.
To get round this problem, I included the style sheet right there in the page instead of using the script to include it.
Sorry to a be nuesance
Graham
524. Awnish - 23rd Sep 2008 - 1:49 pm
This is great script for image cropping tools. I have searched for many but this is the best. Just have few issues in saving the cropped image to the database and server, so can any one help me out there? How can i save the cropped images ?
525. Dave - 23rd Sep 2008 - 1:53 pm
Awnish:
Thanks for your comment, glad the cropper helps. Please see the FAQ’s for details on what to do to save images to your server.
526. Rakesh - 26th Sep 2008 - 10:10 pm
Hi, I am Using this script of Image Croppper in my application. As per requriments when we click on Image then only crop selector display in an Image.. But my requirement is to Show Crop selector on Page Load with in Image. Top Left corner of Image(crop selector minimum width 75, height:75). Please Suggest me ..
527. Dave - 26th Sep 2008 - 10:14 pm
Rakesh:
Please ask this question on the Google group.
528. SleepingTroll - 27th Sep 2008 - 3:23 am
I have a problem with the cropper when I try to use the N & S handles for dragging, Rather than describe please visit site and try for yourself, the drag box jumps away from cursor.
529. Chris - 7th Oct 2008 - 6:04 pm
I just want to note that the DOCTYPE definition is CRUSIAL to this tool working properly in IE7. Tested under IE7, FF3, Opera 9 and Safari and so far, only IE7 malfunctions when it’s missing. Malfunctions range from blank divs (show as white, gray and black), to South (and sometimes North too) divs being black (no transparency). Took me a week to figure this out. Hope it can save people some time.
530. peto - 8th Oct 2008 - 1:11 am
(I’m not posting this in Google Groups, because it wants me to join the group, which I’m not interested in. If you want people to post in a group, make it less restrictive…)
The examples load the cropper in onload. This causes visual glitches for me in FF3. When a default region is set, it takes a frame before it shows up, so the unfaded image flickers briefly. It also causes the preview to flicker briefly before overflow: hidden kicks in (this seems like an FF3 bug). I took the initialization out of onload and these go away.
I’d recommend documenting the auto-CSS-loading; better yet, remove it and include the CSS explicitly. It’s brittle; it took me a while to figure out why switching to cropper.uncompressed.js in the example broke everything (before I just renamed it and discarded the obfuscated one; I’ll let gzip handle compression). Most people that put CSS and JS files in different directories are also going to want to do it explicitly.
Unrelated patch:
Don’t intercept alt-left and alt-right; those are ubiquitous browser keys and it’s very disruptive to catch them. (I’m surprised FF3 even allows it.)
Add options.resizePreview (function). If set, this is called with the crop region size when the region changes to retrieve the desired preview image size. This allows previewing regions of varying aspect ratios, and fitting previews in a specified region.
This is backwards-compatible. If resizePreview is not set, minWidth and minHeight are used as before. If resizePreview is set, minWidth and minHeight are not used by the image preview.
This means that it’s possible to open a preview cropper with no default crop region; in this case, the preview won’t be displayed until the region is first set. To use resizePreview with a default region without using minWidth and minHeight, use options.onloadCoords instead.
(All changes are in the public domain.)
patch: http://pastebin.com/f9a0e690
example resizePreview: http://pastebin.com/f5a035683
531. ingiltere ogrenci vizesi - 11th Oct 2008 - 7:25 pm
Why this web site do not have other languages support?
532. TheIceman - 11th Oct 2008 - 9:37 pm
@ ingiltere ogrenci vizesi
1. we would rather the owner develop a new version of the script than worry about a bloody language problem on a website
2. cause the majority of people can speak english
3. cause the owner is not rich
4. cause it is not necessary
5. if it bothers you, volunteer to fix it.
533. svempa - 15th Oct 2008 - 4:57 pm
Change ratio after cropper has been initiated.
This has been requested by a few people, but so far I have seen no working example. It was suggested that one take a look at the demo which has a CropImageManager class which allows the cropper to be removed and then reapplied using different settings. I have had a look at this demo, but I cannot make it work. I guess it should be easy, but my strongest skill is not js, so I’m not quite sure how to put together a function that could switch between different ratios. Would be great if someone could write a couple of lines of code to help me out…
Thanks in advance.
Otherwise a great looking tool.
[google does many good things, but their googlegroups is a pain in the butt. highly intrusive and takes some effort to join. googlegroups… no thanks]
534. Dave - 15th Oct 2008 - 5:14 pm
Svempa:
I’ve moved your question to the Google group, and have provided an example solution there also.
535. svempa - 15th Oct 2008 - 6:21 pm
cheers a million, just what I was trying to accomplish
536. Nitesh - 30th Oct 2008 - 12:25 pm
I have tried this control using Ajax ModalPopupExtender. The Crop Box is not getting displayed. Can any one please help me.
537. Json - 4th Dec 2008 - 8:15 am
Updated for pablitobs and others – posted by pablitobs
The code should have the ”==”
Cheers
538. zig - 9th Jan 2009 - 2:51 pm
does anyone know how to take the x, y, width, height parameters from this script and feed them to PHP using imagecropresampled()? I’ve plugged the numbers in a variety of ways and can’t seem to get them to work properly.
thanks for any help you can offer me…
539. Dave - 10th Jan 2009 - 8:45 pm
zig:
Please take a look at the FAQ’s there are a couple of backend solutions for PHP there.
540. zig - 11th Jan 2009 - 2:12 pm
Unfortunately all of the examples have been removed for security reasons. Oh well… I’ll keep working on my own.
541. Lucas H. - 14th Jan 2009 - 10:24 pm
Has anyone done a classic ASP implementation for this excellent UI yet? Is such a thing even possible? All my research has led to dead ends.
Also – comment 364 in this thread appears to break the page in IE6.
542. Mustapha F. - 19th Jan 2009 - 5:35 pm
can anyone say why displayOnInit: true doesn’t work with minWidth and minHeight? It works only with ratio.
thanks for help.
543. Dave - 19th Jan 2009 - 6:54 pm
Mustapha:
displayOnInit only applies when using ratios as I assumed that using the ratio as the starting size was the best way to do that. I believe that was before I added minWidth & minHeight handling. To be honest you are correct that it should be an available option with both, I’ve added it to the feature request list.
544. Colin M - 20th Jan 2009 - 1:46 am
Hi,
Can not create a popup window without the imagearea/cropper flashing white and then disappering.
Has anyone else had this problem and solved it or know of a fix?
545. Andrew - 20th Jan 2009 - 10:40 am
Really like this cropper, but it doesn’t work on IE8 (mode: IE8; document mode: IE8). Do you have plans to support it and when? Thanks!
546. Chris - 20th Jan 2009 - 2:39 pm
541 – Lucas,
If you know how to program, it is possible to do. If you are looking for kiddie-scripts, you will probably not find any for this.
545 – Andrew,
I think donations to the software help encourage updates due to browser updates/changes. :)
547. Jim Mead - 3rd Feb 2009 - 11:44 pm
Hi,
I am trying to maintain the crop area on submission so that if a user submits the form without entering all the required information they wont have to re-select the area.
I have managed to get that working OK, however, I would like the reset button to fully reset, rather than reverting back to the onloadCoords.
If you view the source you will see that I have tried removing the cropper, and re-initiating it without the onloadCoords. But it is still resetting to the coordinates that were used when the page was loaded.
To be honest JavaScript is not my strong point, and I have only been playing with this page for a few hours, so it is probably something fairly simple that I have overlooked.
548. westworld - 5th Feb 2009 - 7:57 am
Could anyone point me to some sites that use Cropper UI plz?
549. Dave - 6th Feb 2009 - 1:22 pm
Jim:
I took a look at your example but I think I may be missing something as I can’t get it to submit the form and bring me back to the cropper. I’ll be happy to help if you can give me steps on your example to replicate your issue.
550. Jim Mead - 6th Feb 2009 - 2:03 pm
Hi Dave,
I had disabled the validation temporarily to show my boss how the cropper and resize work.
If you submit the form without changing any of the options below the reset button it should bring you back to the cropper.
Thanks for your help.
Leave a comment
No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)