DEfusion.org.uk

JavaScript Image Cropper UI, using Prototype & script.aculo.us

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	Prototype v. 1.5.0_rc0 > script.aculo.us v. 1.6.1 >
Demo	View demo page
Links	Project Wiki Bug/Feature request list Project FAQ's Project discussion/mail list
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:

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

Display code as plain text

JavaScript:

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.

Display code as plain text

HTML:

<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',
{ onEndCrop: onEndCrop }
);
} );
</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:

<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',
{
minWidth: 220,
minHeight: 120,
onEndCrop: onEndCrop
}
);
} );
</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:

<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.

Display code as plain text

HTML:

<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.

Related Link: 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.

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

Alright, here are my patches again:

I have found a bug when using Safari 3 for Mac and Windows. If your image to be cropped is not being displayed at the native size, Safari will mess up a bunch of the calculations, causing the cropper to be all messed up looking.

To fix this, change the lines that reference:

Display code as plain text

JavaScript:

this.imgW=this.img.width;

this.imgH=this.img.height;

Display code as plain text

JavaScript:

this.imgW=(this.img.style.width)?this.img.style.width.replace(/px/,‘’):this.img.width;

this.imgH=(this.img.style.height)?this.img.style.height.replace(/px/,‘’):this.img.height;

and this line that references

Display code as plain text

JavaScript:

var _45=[this.areaCoords.x1+px,this.areaCoords.y1+px,_42+px,_43+px,this.areaCoords.x2+px,this.areaCoords.y2+px,(this.img.width~~this.areaCoords.x2)+px,(this.img.height~~this.areaCoords.y2)+px];

Display code as plain text

JavaScript:

var _45=[this.areaCoords.x1+px,this.areaCoords.y1+px,_42+px,_43+px,this.areaCoords.x2+px,this.areaCoords.y2+px,(this.imgW~~this.areaCoords.x2)+px,(this.imgH~~this.areaCoords.y2)+px];

Yet again, I have tried to submit patches via this blog, but textile screws it up.

Below is me testing various methods to post javascript to this blog.

this.blah = ‘test’;

Display code as plain text

HTML:

this.blah = ‘test’;

Display code as plain text

JAVASCRIPT:

this.blah = ‘test’;

Display code as plain text

JavaScript:

this.blah = ‘test’;

To fix this, change the lines that reference:

Display code as plain text

CODE:

DQp0aGlzLmltZ1cgPSB0aGlzLmltZy53aWR0aDsgDQp0aGlzLmltZ0ggPSB0aGlzLmltZy5oZWlnaHQ7DQo=

Display code as plain text

CODE:

DQp0aGlzLmltZ1c9KHRoaXMuaW1nLnN0eWxlLndpZHRoKT90aGlzLmltZy5zdHlsZS53aWR0aC5yZXBsYWNlKC9weC8sJycpOnRoaXMuaW1nLndpZHRoOw0KdGhpcy5pbWdIPSh0aGlzLmltZy5zdHlsZS5oZWlnaHQpP3RoaXMuaW1nLnN0eWxlLmhlaWdodC5yZXBsYWNlKC9weC8sJycpOnRoaXMuaW1nLmhlaWdodDsNCg==

And then a little farther down, change (at the end of a line for the compressed one or on two different lines for the non-compressed):

Display code as plain text

CODE:

DQoodGhpcy5pbWcud2lkdGgtdGhpcy5hcmVhQ29vcmRzLngyKStweCwodGhpcy5pbWcuaGVpZ2h0LXRoaXMuYXJlYUNvb3Jkcy55MikrcHgNCg==

Display code as plain text

CODE:

DQoodGhpcy5pbWdXLXRoaXMuYXJlYUNvb3Jkcy54MikrcHgsKHRoaXMuaW1nSC10aGlzLmFyZWFDb29yZHMueTIpK3B4DQo=

Thank you! Simple. Working.

Dave,

Thanks so much that worked perfectly!

Hi Dave,
Thankyou for this great script it really is excellent.
One thing I looked at altering was to allow a different crop ratio for landscape and portrait pictures. Setting a 4:3 ratio works faultlessly with landscape pictures but would like if possible to allow a 3:4 ratio when dealing with Portrait shots.

One way to do this that jumped out to me was to enable the shift key (which is disabled with area ratio cropper anyway) to swap the ratio from 4:3 to 3:4 instead, is this even possible?

Another way I tried without success was to pass a value (either landscape or portrait) from the PHP straight to the init_cropper.js where it would be read and depending on the value would run one or other of the croppers:

Display code as plain text

JAVASCRIPT:

var aspect = document.formone.aspect.value;

if (aspect <span style="color: #3366CC;">"Landscape"</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    Event.<span style="color: #006600;">observe</span><span style="color: #66cc66;">(</span>window, <span style="color: #3366CC;">'load'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span> <span style="color: #003366; font-weight: bold;">new</span> Cropper.<span style="color: #006600;">Img</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'cropImage'</span>,<span style="color: #66cc66;">{</span>ratioDim: <span style="color: #66cc66;">{</span>x: <span style="color: #CC0000;color:#800000;">640</span>,y: <span style="color: #CC0000;color:#800000;">480</span><span style="color: #66cc66;">}</span>,displayOnInit: <span style="color: #003366; font-weight: bold;">false</span>,onEndCrop: onEndCrop<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span>;<span style="color: #66cc66;">}</span> <span style="color: #66cc66;">)</span>;</div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">(</span>aspect “Portrait”) {

Event.observe(window, ‘load’, function() { new Cropper.Img(‘cropImage’,{ratioDim: {x: 480,y: 640},displayOnInit: false,onEndCrop: onEndCrop});} );

}

If the first idea isnt possible then I’ll have to go back and work on the second idea.

Anyone have any other suggestions?
Paul.

Very welcome, Dave! I might not be able to donate money, but donating bug fixes and new features is almost as good ;)

Inker:
Thanks for that I’ll try and integrate those fixes when I next look at the script.

thebrainman:
To set a fixed size without the users having an option of resizing the crop area you will have to set both the minimum & the maximum dimensions to the same dimensions (e.g. minWidth == maxWidth).

Hey… This script is awesome… thanks so much for putting in the time to create this. I do have one question though.. How can I disable the ability for users to resize the selection area? I set the minimun Hight and Width, but the users seem to be able to resize it, even though it shouldn’t allow it.. Let me know! thanks!

I was planning on using this on my site, but I needed features it didn’t have, and I figured, hey, I’m a coder, I can hack them in. So I fixed a minor bug that prevented the uncompressed version from running, and then added three new features to it:

Pixel granularity, which makes the cropper act like it’s on a fixed grid of a programmer-controlled size;
Size scaling, which lets the cropper intelligently crop resized images according to their original pixels;
And “quick click” selection resetting, like many graphics programs use (just click quickly outside a selection to remove it).

All of these are optional features, controlled by various parameters at initialization time. You can view (and download) my updated version here: http://beta.thewotch.com/bar/index.html

I haven’t recompressed the code; if you want to keep my patches, David, I figure you’ll do that yourself. I made a reasonable attempt to match your code style; please forgive me if I didn’t quite always get there, since my own style is quite different. I’m calling this version 1.2.1, since I don’t have a better version number to go by, and I’m releasing my patches under the BSD license, just like the original code was.

This fixes bugs #00024 and #00022 in the bug list, I think.

Enjoy, and I hope you like it! :D

Thanks for an awesome script; exactly what I have been looking for for my hacks. I learnt about this only after I started playing with Image tagging on the Photobucket website.

Thanks once again.

Solution to the “IE white” bug. (when the whole image goes blank/white)

http://blog.platinumsolutions.com/node/184

hi Dave

where can I Get your DEMo in ASP.NET ?
Very thanks
julie

Dear Dave!

I really appreciate your work on the JS Cropper! A great tool!

Though I’m having some problems on creating multiple croppers on a page.

Has anybody found a solution yet for Bug #00015 (Multiple Croppers) ?

(Comment from Luis Bolson: ”...with two images, it works fine, except by the fact that one of them actually is not calling the callback function, which is the same for both images”)

Thank you for your help!

hi there,

this script is awesome. nonetheless i have expirienced two very weird issues, that i wanted to share here – maybe someone knows about a solution or at least – what the reason for the problems are:

1.) in IE and FF on some windows XP systems, the cropper crashes the browser with a runtime error. i have no idea why. anyone?

2.) the newest version of opera:

Version 9.24
Build 8816

... treats a drag on the image as a try to drag the actual image, therefore does not allow the cropped area to be applied on the image: instead it gets transparent and waits to be moved somewhere. i did not specify the image as link or something like that.

any ideas on that?

kindest regards, jekolus

‘With Preview’

Can you use the preview, to select the cropped area, similar to the way facebook allows you to select your profile image?

Cheers

Chris:
The bug regarding the cursor keys not calling the onEndCrop() method is a documented bug which I need to resolve.

The functionality regarding the shift key is expected functionality, the shift key switches the cropper to square mode, if you wish to enforce a ratio for the cropper which is not a square then all you have to do is provide the ratio as a param, if there is a ratio width & height then the squaring should not apply (unless this is the bug you are reporting).

-D

Just found a bug. In IE7 and FF 2.0.0.9 on WinXP SP2, draw a box and then move the box with cursor keys (w or w/o shift key), the text fields do not update the coordinates until there is a mouse click.

Chris

Just found a bug. When I use the shift key to force ratio resizing (in IE7 and FF 2.0.0.9 on WinXP SP2), the original ratio of the selection is changed into a perfect square and then maintains that ratio while resizing with the shift key pressed. If I draw a 16:9 ration box, hold the shift key and resize…it should maintain a 16:9 ratio. Instead, it reverts into a 1:1 box.

Chris

Great code. Good job. I’ll defintely be leaving your a PayPal tip. You might place your PayPal donation link up towards the top….I just happened to scroll down and then saw it. ;)

Chris

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

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

JavaScript Image Cropper UI, using Prototype & script.aculo.us

Announcement: V2 plans & fund raising

Details

About

Features

Usage

Options

The callback function

Basic interface

Minimum dimensions

Select area ratio

With crop preview

Known Issues

Next Steps

Download

Demo

Feature Requests & Bug Reports

Leave a Tip

Announcement: V2 plans & fund raising

Discussion

Comments

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

400. Will - 4th Dec 2007 - 6:51 pm

399. Will - 4th Dec 2007 - 6:45 pm

398. Will - 4th Dec 2007 - 6:19 pm

397. vasili4 - 4th Dec 2007 - 4:45 pm

396. thebrainman - 3rd Dec 2007 - 12:54 am

395. Paul99 - 2nd Dec 2007 - 2:57 pm

394. Inker - 29th Nov 2007 - 5:03 pm

393. Dave - 29th Nov 2007 - 11:52 am

392. thebrainman - 29th Nov 2007 - 7:29 am

391. Inker - 28th Nov 2007 - 9:26 pm

390. Shankar Venkataraman - 26th Nov 2007 - 7:52 pm

389. crudo - 26th Nov 2007 - 2:18 pm

388. Julie - 20th Nov 2007 - 11:18 am

387. Michael - 12th Nov 2007 - 9:17 am

386. jekolus - 9th Nov 2007 - 2:57 am

385. Spooky - 8th Nov 2007 - 10:36 pm

384. Dave - 8th Nov 2007 - 12:33 am

383. Chris - 7th Nov 2007 - 9:44 pm

382. Chris - 7th Nov 2007 - 8:53 pm

381. Chris - 7th Nov 2007 - 8:40 pm

Leave a comment

Recent posts

Categories

My Sites

Ad Links