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.

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

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

Pages: « 26 … 18 17 16 15 14 [13] 12 11 10 9 8 … 1 » Show All

260. Niklas Johansson - 2nd Jul 2007 - 8:25 pm

Is it possible to use imgPreview and onloadCoords at the same time? I doesent get it to work..

Thanks for a nice tool!!
Niklas

259. Rupert - 26th Jun 2007 - 2:17 pm

Hi!

Your code is working well with one exception:

When I put an upload form and a dynamic crop preview into the same window, IE7 does not support the code and won’t open the file upload browsee window.

Does anyone know what it is about?

Thx

Rupert

258. shovavnik - 20th Jun 2007 - 1:51 pm

I’ve been working with cropper on a multi-lingual site that supports bidirectional layouts. In other words, some languages display from left to right and others from right to left.

Cropper has a problem on right to left pages where it draws the “west” overlay over the “east” overlay. You can see a demonstration of this problem if you go to to your castle demo and simply add style attribute to your body tag. Set it to style=”direction: rtl;” and watch the overlays.

I’ve solved the problem, but I’m not 100% sure it’s the correct solution.

In the drawArea() function, I’ve added the line
_4b.left=0;
after the line
_4b.height=_453;

So now _4b reads like this:
var _4b=this.west.style;
_4b.top=_451;
_4b.height=_453;
_4b.left=0;
_4b.width=_450;

It works in IE 7 and FF (most recent) in rtl and ltr. I haven’t checked other browsers.

257. Nice Demo - 20th Jun 2007 - 10:15 am

Good work !!!!

256. Don Schonknecht - 16th Jun 2007 - 6:01 am

Very useful! One problem though – Konqueror doesn’t handle transparency and without transparency the image isn’t visible at all. A simple fix for this is to change the CSS to use a transparent tinted PNG in the presence of Konq/KHTML. You can also make the transparent PNG @ http://apps.everamber.com/alpha/ to save yourself sometime. :)

255. dimitri - 15th Jun 2007 - 8:11 pm

awesome code!!

I have a simple question. How do you create that transparency effect? For example, lets say I have an image in a div, and I put an absolute div ontop of it, how do you black out the rest of the image and only keep the full opacity of the nested div?

Do you have to calculate it on the fly? Or do you layer 2 images or something?

254. Max Raskin - 13th Jun 2007 - 11:13 am

Well done, it’s a really useful tool, great idea using 4 surrounding divs to mimic overlay, great coding.

Only one thing, I noticed a bug, when a body’s CSS direction selector set to rtl, the select rectangle gets whacky, the solution to this problem is to force the container of the crop tool to have direction: ltr; set, works great that way.

cheers, Max.

253. zhangliang - 11th Jun 2007 - 5:11 am

no problem ,i lose the cropper.js file,i make a mistake,sorry,very thank you

252. zhangliang - 11th Jun 2007 - 4:41 am

very good demo,thank you very much,but i meet a question,i want to use your demo in asp.net ,but when i put the demo code into .aspx pages,it always tip “Envent,undifine” i used your js files,but i can’t compile through

251. Dave Bolton - 8th Jun 2007 - 7:30 pm

Hey Russ. Thanks for the response. I wasn’t clear enough, but I actually do exactly the same thing. I use a smaller working copy, and calculate the ratio.

minWidth and minHeight actually DO work fine… BUT if my final crop size is 100×100 (after applying ratio), and my working image is a ratio of 5 times smaller, then the minWidth and minHeight are only 20px, which is perfect for the actual crop box on the working image, but not perfect for the preview size.

e.g.
Original: 1000×1000, Min crop on original: 100×100
Working Image: 250×250, Min. crop on working image: 25×25 (maintains ratio)
leads to => Preview size: 25×25

So I’m happy with the way minWidth and minHeight work, I’m happy with using a working image so I’m not cropping an enormous image file, I’m just trying to find a way to have a reasonable size preview (say 100×100 in example). I realise this could mean a bit of pixelation in the previewWrap, but I’m okay with that.

250. Russ Michaels - 8th Jun 2007 - 4:10 pm

Dave,
when an image is uploaded, if it exceeds my maxwidth, I create a resized working copy setting this to the maxwidth and work out the ratio. This working image is what I use in the cropper, so the minWidth and minHeight still work fine.
You don’t want to resize the big image inside the cropper, this just doesn’t work right, and also means that the big image has to be submitted each time.

249. Anders Heivoll - 8th Jun 2007 - 3:35 pm

Hi.
I just have to say I love this cropper utility, and I’d like to use it in my own little image editor tool on the CMS I’m currently working on. You don’t seem to mention details about the license for this code. Is it allowed to use it in commercial applications?
Other than that, I’m wondering about the same thing as Dave Bolton (a few comments back).

Cheers

248. TheIceman5 - 7th Jun 2007 - 9:27 pm

well done arvind kumar, you do that. Nice comment.

247. arvind kumar - 7th Jun 2007 - 7:42 pm

i am a software Engineer in m n c.i want to search How to move any picture in safari browser.
thanx and regard
Arvind Kumar

246. Miguel - 7th Jun 2007 - 6:18 pm

Thanks so much for this tool, it is really coming in handy. I am using it specifically as an admin tool to create flickr like tooltip-hotspots for photos in a photo gallery, in conjuction with JQuery. This tool makes it very easy!

However! One effect I’m trying to accomplish is to have the tooltip-hotspots that are already made to show up as dashed outlines within the image that the cropper is attached to. I’m doing this so that I can see where each hotspot will overlap as I create new ones. My problem is, that when I click on the image to use the cropper, my outlined hotspots disappear. They are generated divs that are attached dynamically using JQuery, and I have followed their instructions to make sure that JQuery is not clashing with the other libraries.

Is there a reason why the cropper tool would remove other divs? and is it possible to keep that from happening?

245. Dave Bolton - 6th Jun 2007 - 11:47 am

Love this cropping code, very very good stuff.

I’m utilising the previewWrap, but I’d like to set it to a specific size, not the minWidth and minHeight.

The reason: the actual picture that will be cropped on the server side is much larger than the one that I’m displaying, so I apply a ratio to the crop dimensions that I receive from your cropping code.

e.g. say the real image is a 1000 pixel square, I might display a 250 pixel square in the browser, giving a ratio of 4. So the dimensions and initial position I receive on the server must be multiplied by 4 before the real cropping takes place. Since everything is multiplied by 4, the minWidth and minHeight are only a quarter of what the real values will be will be, thus the previewWrap image is VERY small (too small to be useful). I’d like to manually set it to a different size.

I tried to modify the code myself, by changing all references in the preview specific code to use my static size rather than minWidth and minHeight. This was partially successful, but seemed to mess with the overflow a little.

Any ideas on which bits I should change to get it to work?

Cheers,
Dave

244. Dave Bolton - 6th Jun 2007 - 11:32 am

Joe,

You use the callback mechanism. See the references to “onEndCrop” above. The callback mechanism will call some javascript code that you write. Mine sets a couple of hidden variables and then submits the whole page, then on the server side I process the actual cropping using the values from the hidden fields. There is no reason that you couldn’t do this in an AJAX way though. Hope that helps.

Cheers,
Dave

243. Joe Elliott - 6th Jun 2007 - 4:23 am

This demo looks really cool, and I was able to get it to run without a problem on my server. My only question is once the image has the crop marks set.. then what? How do you save that cropped image, or pass the information on? Am I missing something? I guess I am looking for a button that says “Crop Complete” or something, and when that is pressed, the image is saved in cropped form, and you move on to the next screen… is that possible?

Thanks!

242. Dave - 31st May 2007 - 9:03 am

TheIceman5:
It looks like a z-index problem, but it also looks like an old version of the cropper UI script is being used. Try updating to the most recent version of the cropper UI.

If you could post a link to a live example I could take a look, but this use-case seems to be one that I cannot account for myself due to the external CSS for the popup that is probably the cause of the issue.

241. TheIceman5 - 30th May 2007 - 9:39 pm

still waiting for a reply, been months now. If you dont have any idea, just say so, come on. IM not going to give up until i get an answer, IM not like that. IM persistent.

i have a problem with it when i use it in layers, “advanced layer popup” http://www.dmxzone.com/ShowDetail.asp?NewsId=12769 or advanced DHTML popup http://www.dpopup.com or any other layer for that matter.

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 on this website 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

Pages:« 26 … 18 17 16 15 14 [13] 12 11 10 9 8 … 1 » Show All

Leave a comment

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