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.

Click here to lend your support to: JavaScript Image Cropper V2 fund raising and make a donation at www.pledgie.com !

Details

Download
Version 1.2.0
Last updated 30th October 2006
Requirements
Demo View demo page
Links
License BSD License
Changelog
1.2.0
  • Added id to the preview image element using 'imgCrop_[originalImageID]'
  • #00001 - Fixed bug: Doesn't account for scroll offsets
  • #00009 - Fixed bug: Placing the cropper inside differently positioned elements causes incorrect co-ordinates and display
  • #00013 - Fixed bug: I-bar cursor appears on drag plane
  • #00014 - Fixed bug: If ID for image tag is not found in document script throws error
  • Fixed bug with drag start co-ordinates if wrapper element has moved in browser (e.g. dragged to a new position)
  • Fixed bug with drag start co-ordinates if image contained in a wrapper with scrolling - this may be buggy if image has other ancestors with scrolling applied (except the body)
  • #00015 - Fixed bug: When cropper removed and then reapplied onEndCrop callback gets called multiple times, solution suggestion from Bill Smith
  • Various speed increases & code cleanup which meant improved performance in Mac - which allowed removal of different overlay methods for IE and all other browsers, which led to a fix for:
  • #00010 - Fixed bug: Select area doesn't adhere to image size when image resized using img attributes
  • #00006 - Removed default behaviour of automatically setting a ratio when both min width & height passed, the ratioDimensions must be passed in
  • #00005 - Added ability to set maximum crop dimensions, 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
  • Switched keydown for keypress for moving select area with cursor keys (makes for nicer action) - doesn't appear to work in Safari
1.1.3
  • Fixed wrong cursor on western handle in CSS
  • #00008 & #00003 - Added feature: Allow to set dimensions & position for cropper on load
  • #00002 - Fixed bug: Pressing 'remove cropper' twice removes image in IE
1.1.2
  • Fixed bugs with ratios when GCD is low (patch submitted by Andy Skelton)
1.1.1
  • Fixed bug with rendering issues fix in IE 5.5
  • Fixed bug with endCrop callback issues once cropper had been removed & reset in IE
1.1.0
  • Fixed bug with IE constantly trying to reload select area background image
  • Applied more robust fix to Safari & IE rendering issues
  • Added method to reset parameters - useful for when dynamically changing img the cropper is attached to
  • Added method to remove cropper from image
1.0.0
  • Initial verison

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

Screen shot of cropper in action

  • 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:

Display code as plain text
HTML:
  1. <script type="text/javascript" src="scripts/cropper/lib/prototype.js" language="javascript"></script>
  2. <script type="text/javascript" src="scripts/cropper/lib/scriptaculous.js?load=builder,dragdrop" language="javascript"></script>
  3. <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:

Display code as plain text
JavaScript:
  1. function onEndCrop( coords, dimensions ) {
  2.     $( 'x1' ).value = coords.x1;
  3.     $( 'y1' ).value = coords.y1;
  4.     $( 'x2' ).value = coords.x2;
  5.     $( 'y2' ).value = coords.y2;
  6.     $( 'width' ).value = dimensions.width;
  7.     $( 'height' ).value = dimensions.height;
  8. }

Basic interface

This basic example will attach the cropper UI to the test image and return crop results to the provided callback function.

Display code as plain text
HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3.     <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             { onEndCrop: onEndCrop }
  8.         );
  9.     } );
  10. </script>

Minimum dimensions

You can apply minimum dimensions to a single axis or both, this example applies minimum dimensions to both axis.

Display code as plain text
HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3. <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             {
  8.                 minWidth: 220,
  9.                 minHeight: 120,
  10.                 onEndCrop: onEndCrop
  11.             }
  12.         );
  13.     } );
  14. </script>

Select area ratio

You can apply a ratio to the selection area, this example applies a 4:3 ratio to the select area.

Display code as plain text
HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2.  
  3. <script type="text/javascript" language="javascript">
  4.     Event.observe( window, 'load', function() {
  5.         new Cropper.Img(
  6.             'testImage',
  7.             {
  8.                 ratioDim: {
  9.                     x: 220,
  10.                     y: 165
  11.                 },
  12.                 displayOnInit: true,
  13.                 onEndCrop: onEndCrop
  14.             }
  15.         );
  16.     } );
  17. </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.

Display code as plain text
HTML:
  1. <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />
  2. <div id="previewWrap"></div>
  3.  
  4. <script type="text/javascript" language="javascript">
  5.     Event.observe( window, 'load', function() {
  6.         new Cropper.ImgWithPreview(
  7.             'testImage',
  8.             {
  9.                 previewWrap: 'previewWrap',
  10.                 minWidth: 120,
  11.                 minHeight: 120,
  12.                 ratioDim: { x: 200, y: 120 },
  13.                 onEndCrop: onEndCrop
  14.             }
  15.         );
  16.     } );
  17. </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.

Other Websites: 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

Download

Demo

View the demo pages for the JavaScript Image Cropper UI, using Prototype & script.aculo.us

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.

Click here to lend your support to: JavaScript Image Cropper V2 fund raising and make a donation at www.pledgie.com !

Discussion

Note: Please only use the comments for general comments and the discussion list to discuss this code project (e.g. implementation queries, change suggestions etc.).

Comments

There have been 494 comments so far, join the discussion.

Pages: « 25 24 23 22 [21] 20 19 18 17 16 15 … 1 » Show All

420. Leonardo Diaz - 7th Jan 2008 - 3:51 am

Hi, this is a great work, unfortunately it does not work using scriptaculous version 1.7. It seems that it works with no problem “no matter” the version of prototype, but the version for scriptaculous has to be 1.6.
It gives 2 errors (using firebug)
1. Class is not defined
[Break on this error] var CropDraggable=Class.create();
cropper.js (line 18)
2. Cropper has no properties
(no name)()update (line 50)
[Break on this error] new Cropper.ImgWithPreview(

The same error occurs, when you dont load the scriptaculous library, so that is a starting point

419. Dave - 24th Dec 2007 - 3:47 pm

This is just a quick note to all those who have left comments and are interested in the progress of the JavaScript image cropper, I have just posted a quick overview of my plans for the next version of the cropper.

So if you’re interested in finding out about my plans for the next version and how you can help then I urge you to read my post on JavaScript Image Cropper V2 Details and Fund Raising

418. Dave - 24th Dec 2007 - 3:42 pm

Madchimp:
Thanks for the kind comments, I’m glad you found it useful.

417. madchimp - 23rd Dec 2007 - 3:14 pm

Very sweet script I can’t wait to start palying with it on my site. It is exactly what i was looking for! Once I have it implemented on my wifes site she should be able to upload the pictures on her own. heheh A big thanks for making your code available to the community

416. Mert - 20th Dec 2007 - 11:30 am

Hey, how can I cancel the cropping after selecting a portion on the image?
(rolling-back the visual to its initial state)
Thx..

415. wozzzzza - 19th Dec 2007 - 9:40 pm

@TK

yeah why dont we just upload photoshop to our websites and make each user who wants to crop anything download 500meg each time, that would be just as effective as what you want to do. or better still provide a remote desktop link to your computer on their website where a user can upload a pic to your computer, open photoshop and then modify it that way hey??

414. TK - 19th Dec 2007 - 7:21 am

Would be much better if we make it able to select circle-areas or include a magic-wand feature like photoshop…but right now, I think this is the best we can get~

413. Dave - 10th Dec 2007 - 9:00 am

Johan:
I’ve never really looked at jquery before, but my first guess would be is it defining any global functions/classes/objects that have the same name as any prototype/script.aculo.us, e.g. the $() function etc. As you’re loading in jquery last then if it does they would override the previous definitions.

412. usha - 10th Dec 2007 - 8:27 am

How to save the cropped image?Please help me?Its very urgent.

Thanks,
Usha

411. Johan Höglund - 10th Dec 2007 - 1:53 am

There seems to be a problem with cropper and jquery.
If i load both jquery and cropper on the same page, the cropper doesn’t work.

I’m using Firefox 2, i load the scripts in this order:
prototype
scriptaculous
cropper
jquery

I do not use any of the jquery functions/classes.

I’ve added an alert window at line #238 (Inside Cropper.Img.prototype, in the initialize: function)
The alert window pops ups, so at least that line is run.
Firefox does not generate any error message or warning, just dead nothing.

What happens is that the image is left untouched, no special cursor, no resizable area, just an ordninary image.

410. ionut - 8th Dec 2007 - 2:19 am

Hello!
In the end I manage to find the answer by myself… the reason I ask that question was to see if someone else had the same issue and how they manage to fix it… I believe that this is the reason we have forums … to cooperate and to make things better together.

409. Chris - 7th Dec 2007 - 6:12 pm

To shovavnik:

I’ve had my share of slaps in the face when I first started. Did I let that discourage me from trying? No, I pressed on to find the answers.

But to get back on track on why I posted a comment to begin with after seeing several similar posts….if someone has taken their time to make something available for free and only ask for a voluntary donation, what else do you want? I’m just saying if you are going to take someone else’s work for free and use it, don’t expect it to be gift wrapped.

408. shovavnik - 7th Dec 2007 - 4:39 pm

To Chris:
1. Not everybody is as experienced as you seem to be. Some are starting off. Some are knowledgeable in other areas.
2. Not everybody speaks English as a native tongue. Maybe you could offer to buy them a dictionary and save them the shipping altogether.
3. Your jive talks and quacks like a personal insult, whatever you say.
4. Why exactly couldn’t you “resist”? Whose fault is that? I don’t know when you joined the list, but you certainly managed to “resist” on the dozens of requests for assistance before this last one.

A programmer may have to carry his/her own weight. (And maybe this guy’s just starting out?) But a person has to carry more than just his weight on his shoulders.

407. Chris - 7th Dec 2007 - 1:34 pm

To Ionut:

Not trying to personally insult you, but in the world of developers…be prepared to carry your own weight or face criticism.

406. Ionut - 7th Dec 2007 - 12:07 pm

To Chris:
“Thanks man your advice is very useful…”

405. Chris - 7th Dec 2007 - 11:37 am

I just couldn’t resist replying to this post. I mean, someone has taken the time to write a working model of code and yet someone is too lazy to figure out the rest of it on their own. They want to be spoon fed!

“Does anybody knows how to control(move/resize) the cropping selection programatically, using some buttons for exemple?”

I would recommend reading “JavaScript for Dummies” instead of just asking a question like this. Also, you might want to pick up a dictionary at the same time to take advantage of combined shipping to help reduce the cost of shipping. Alternatively, you could hire a web developer to do the work for you.

JavaScript for Dummies: http://www.amazon.com/JavaScript-Dummies-Emily-Vander-Veer/dp/0764576593/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1197024961&sr=8-1

404. Ionut - 7th Dec 2007 - 10:21 am

Hello!

Does anybody knows how to control(move/resize) the cropping selection programatically, using some buttons for exemple?

Thanks

403. Quessir - 6th Dec 2007 - 10:18 am

Hi, David. Your cropper works excellent on Firefox(2.0.0.11)... But absolutely doesn’t in IE (neither 6, nor 7) and Opera(9.10). I don’t know why, ‘cause i saw examples and demos. I did it almost the same way. Maybe, the reason is it coded on Prototype 1.5.0 and i’m using 1.6. Is there any updates for 1.6?

402. wozzzzza - 5th Dec 2007 - 9:11 pm

acctman, go here. http://mondaybynoon.com/2007/01/22/crop-resize-with-javascript-PHP-and-imagemagick/

401. acctman - 5th Dec 2007 - 6:10 pm

does anyone have a working example of how to upload and image crop and save the image?

Pages:« 25 24 23 22 [21] 20 19 18 17 16 15 … 1 » Show All

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)