Details

Download
Version 1.2.1
Last updated 6th October 2009
Requirements
Demo View demo page
Links
License BSD License
Changelog
1.2.1
  • Added support for latest versions of Prototype & script.aculo.us (1.6.1.0 & 1.8.2 respectively). Changes provided by Tom Hirashima.
  • No-longer package prototype & script.aculo.us with the release
  • Changed tests to use google ajax libraries api to load prototype & script.aculo.us
  • Added option to not auto include the cropper CSS file
  • #00008 - Fixed bug: Dynamic include of cropper CSS expected cropper.js and failed when using cropper.uncompressed.js
  • #00028 - Fixed bug: Doesn't work with latest script.aculo.us - Fix by Tom Hirashima
  • #00030 - Fixed bug: Doesn't work in Firefox 3.5 (CSS include issue)
  • #00007 - Fixed bug: onEndCrop isn't called when moving with keys
  • #00011 - Fixed bug: The image that is to be cropped does not show in IE6.0 -- included CSS fix
  • Tidied up source code & fixed issues that jslint found so it will compress better
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=effects,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.

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.

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 667 comments so far, join the discussion.

Pages: « 34 … 30 29 28 27 26 [25] 24 23 22 21 20 … 1 » Show All

500. shivakumari - 22nd Jul 2008 - 12:56 pm

Hi,
I want to crop the image and store it in a database.Can you explain me how to do it?clearly?

499. TheIceman5 - 14th Jul 2008 - 12:48 pm

@Malwinder, we aint got crystal balls, unless you give us a URL how are supose to check and fix YOUR coding problem?? we know it a problem with your site but unless we see it we cant see what you’ve stuffed up now can we??

498. Malwinder - 14th Jul 2008 - 10:05 am

I am trying to test this script but there is some issue with IE7.0. If I am moving the mouse in the browser area, it throws an error and automatically close. Please check and fix.

497. Dave - 4th Jul 2008 - 9:11 pm

gktips/Shaki:
Can you please clarify your question, and can you please use the Google group for this question, it is linked above at the bottom of the code page (just before the comments)

496. gktips - 4th Jul 2008 - 8:18 pm

Can we use crop tool for other site . Mean it will work only for the image of script site or for other site also.

495. Shaki - 4th Jul 2008 - 8:15 pm

Can we crop and resize the image other then the side we use this script.

494. Dave - 3rd Jul 2008 - 9:51 pm

Chris:
Is there any chance you could share a live example/email me a test example that I can look at to see what your issue is?

It would also be better to discuss this on the Google group if possible.

Glad you like the cropper, I’ll do what I can to help you resolve your issues.

493. Chris - 3rd Jul 2008 - 9:18 pm

Hi,
First thanks for an awesome script! I’ve had it bookmarked for over a year, waiting for a chance to fiddle with it. I have now successfully implemented and customized the tutorial at:
http://mondaybynoon.com/2007/12/17/crop-and-resize-images-with-gd-or-imagemagick-v11/

I “customized” it by not giving an option for the crop type, but instead just including the “ratio.js” file only.
I modified the X and Y to 21/8, so images can be cropped and resized to 420×160px.

Unfortunately, the Cropper is stuck at a different ratio (one that, after cropped and resized to a width of 420, generates a 420×131px image).

So, is it possible that the CropperUI is messing up my ratio? If not, where might I look to find what’s causing the problem?

Thanks!

492. Dave - 3rd Jul 2008 - 7:26 am

Rob:
Yes I think there has been discussion on this within the Google group recently.

491. Rob - 3rd Jul 2008 - 6:04 am

Hi,

Can I load the cropping area after window loading? Not after clicking on the image

Thanks

490. Dan Kresler - 1st Jul 2008 - 10:38 pm

Does anyone have this working in IE7.0 with the latest version of prototype and scriptaculous? It works fine for me in FF3 but gives me a ‘Class’ is undefined error in IE.

489. freak - 26th Jun 2008 - 2:31 pm

this is a great tool dave..but i’ve encountered a problem.
like westy, my cropper is returned from an ajax call so i also used new Cropper.ImgWithPreview(...) instead of calling it on load. it works fine in firefox but never in safari. i tried putting it inside a function but still it does not work. could you please help me? thank you

freak

488. Dave - 21st Jun 2008 - 3:33 pm

Dave:
See the FAQ’s, they are linked to in information section at the top of the page.

487. dave - 20th Jun 2008 - 9:44 pm

how do you see the final cropped image and save it ?
please excuse my lack programing skill

486. Russ - 17th Jun 2008 - 10:00 pm

Is there a way or does anyone have sample code on how to set the crop x, y, width and height from form fields in the cropperUI script? The onEndCrop() routine works great to update form fields. I want to go the other way and set the crop from entries in the form fields if possible.

485. Dave - 29th May 2008 - 1:43 pm

Shakeeb:
EC2 is probably the most cost effective solution, as far as I know (last I read anyway) Facebook has around 500 servers (following a similar model to Google). Hardware is cheap, but also expensive at these levels, you’ll just have to do some calculations on what EC2 would cost vs a dedicated server (or more depending on your projected traffic levels).

484. shakeeb - 29th May 2008 - 1:39 pm

yes that i was thinking about but what you suggest how orkut,facebook application handles this kind of probleam are they having their own dedicated server for image processing or they are using EC2 service what you think because i have to justify these things to my CEO you know what i mean :)

483. Dave - 29th May 2008 - 12:47 pm

Shakeeb:

In my opinion doing the cropping client side (which would only be possible with Flash) and then uploading multiple sizes of an image would result in more traffic to your server (as you’re uploading more images) than one upload and then resize on the server.

If you truly have a user base which you expect to be uploading enough images to bring your server to it’s knees (and you’re using S3 already) why not look at dedicated EC2 instance(s) to handle your image uploading/resizing transfer to S3 etc.

482. shakeeb - 29th May 2008 - 4:48 am

No,my scenario is different like
1.user upload images
2.server crop it and make a multiple copies in different sizes.
3.Then it will be shifted to amazon S3.

Now,i have a question which is , my server will be slow when dozens of people upload images so idea is can i able to upload images like normal and cropping process is done by client side by this Js library or any other way out so let me know like how facebook and orkut allow people to upload images on server and they do image processing and then display a photo gallery of users.same thing i want to implement at my site .Kindly advise me because now i am stuck at this stage
:) and thanks for your interest

481. Dave - 28th May 2008 - 4:34 pm

Shakeeb:

I don’t quite understand your requirements, but it sounds like you want to change the point the image is uploaded? Can you clarify your requirements by giving a list of steps a user would take in your ideal setup e.g. normally it would be:

  1. user uploads image
  2. image displayed for cropping
  3. user submits crop request
  4. image cropped on server
Pages:« 34 … 30 29 28 27 26 [25] 24 23 22 21 20 … 1 » Show All

Leave a comment

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