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.

Related Website: 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 … 20 19 18 17 16 [15] 14 13 12 11 10 … 1 » Show All

300. Dave - 23rd Aug 2007 - 6:18 pm

Saurabh:
I couldn’t see where you were referring to on their site, but my guess is that they have some server side stuff that takes a screen shot of a site (there’s plenty of people who are doing that) and then using the cropper on that image.

299. Saurabh - 22nd Aug 2007 - 3:12 pm

I saw your script being used on a site called http://www.webwag.com/. instead of cropping a picture they are cropping the whole website. can you give me some idea of how they are able to do so ??

298. Dave - 17th Aug 2007 - 8:39 am

Soth:

It is not possible to manipulate images in this way using just JavaScript, this script is the front end which allows you to select an area for cropper you then have to pass this to a server side script to perform the cropping etc.

297. Soth ratana - 17th Aug 2007 - 4:48 am

Dear friend

i show your script is so beautiful…
i like it
But it’s not i want …
Can u do like that

1-crop/resize/compress image with javascritp only (without call server script working only Javascript)

it mean :if user have big image file…it will process in client before send file to server..so that file is smaller than orginal

296. Kev - 14th Aug 2007 - 10:23 am

Great work! Great tool! Thanks alot!

But is this a bug? The onEndCrop handler is being called whenever I click anywhere on the screen, or use the browser window’s scroll bar. I thought maybe something wrong with my implementation but this behaviour is the same on the demo on this site.

Can anyone suggest a fix/workaround?

295. fru - 13th Aug 2007 - 2:55 pm

Hello,

Nice job !

could you please provide a code for selecting a square, but when you change the selection it grow from the center and no from the corner.

Sorry for my bad english !

294. Nima - 13th Aug 2007 - 10:57 am

Hi everybody

I have issue, if someone could help. when I upload a picture I can only see the picture in the small Preview window but the big picture is black? I am using Asp.

could someone help – if you could write to my Email: biip19@hotmail.com

293. Dave - 10th Aug 2007 - 8:05 pm

Hi Will,

Thanks for the bug fix, I’ve added it to the list of changes to implement in the next version, also I have no idea what is going on with textile.

-D

292. Will - 10th Aug 2007 - 4:20 pm

Well, textile appears to love JS. Here is my last post again:

I found a bug with the cropper that happens when ratioDim and minWidth and minHeight are set, and the user holds down the shift key while resizing. Once the crop area gets to the minimum size (while obeying the ratio) it will start to resize down to a square.

Here is the fix:

Line 799 of cropper.uncompressed.js should change from:

Display code as plain text
JavaScript:

  1. if( (mins[0] != 0 || mins[1] != 0) && square ) {

to

Display code as plain text
JavaScript:

  1. if( (mins[0] != 0 || mins[1] != 0) && square && this.ratioX <span style="color: #CC0000;color:#800000;">0</span> <span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span> </div></li></ol></div>
    </div></div><br />

    Line 296 of cropper.js needs to be changed from:

    <div class="igBar"><span id="ljavascript-9"><a href="#" onclick="javascript:showPlainTxt('javascript-9'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-9">
    <div class="javascript"><ol><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><span style="color: #66cc66;">(</span>_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span>||_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">)</span>&amp;&amp;_22<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span> </div></li></ol></div>
    </div></div><br />

    to

    <div class="igBar"><span id="ljavascript-10"><a href="#" onclick="javascript:showPlainTxt('javascript-10'); return false;">Display code as plain text</a></span></div><div class="syntax_hilite"><span class="langName">JavaScript:</span><br /><div id="javascript-10">
    <div class="javascript"><ol><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><span style="color: #66cc66;">(</span>_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span>||_27<span style="color: #66cc66;">[</span><span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">]</span>!=<span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">)</span>&amp;&amp;_22&amp;&amp;this.<span style="color: #006600;">ratioX</span>0){

Thanks for the wonderful tool!

291. Will - 10th Aug 2007 - 4:16 pm

I found a bug with the cropper that happens when ratioDim and minWidth and minHeight are set, and the user holds down the shift key while resizing. Once the crop area gets to the minimum size (while obeying the ratio) it will start to resize down to a square.

Here is the fix:

Line 799 of cropper.uncompressed.js should change from:
if( (mins0 != 0 || mins1 != 0) && square ) {

to

if( (mins0 != 0 || mins1 != 0) && square && this.ratioX 0 ) {

Line 296 of cropper.js needs to be changed from:

if((_27<sup><a href="#fn0">0</a></sup>!=0||_27<sup><a href="#fn1">1</a></sup>!=0)&&_22){

to

if((_27<sup><a href="#fn0">0</a></sup>!=0||_27<sup><a href="#fn1">1</a></sup>!=0)&&_22&&this.ratioX0){

Thanks for the wonderful tool!

290. Dirk - 9th Aug 2007 - 10:39 am

Sorry, I’ve forgot an eMail-Adress for an answer: dbar.master@googlemail.com

Nice tool, it works fine in an standard HTML or ASP.NET aspx Site.
I’ve a problem, when the page is ajax-supportet. After I update a part of the site, the image visible or image-URL for example, with an ajax HTMLRequest, you can’t select the image to set the cropperframe or can do anything else with the image.
As workaroung, i’ll be send a postback and refresh the complete-site. But this is not what I want on an regular ajax-supported page. ;-)

Have someone a tip?

289. Dirk - 9th Aug 2007 - 7:37 am

Nice tool, it works fine in an standard HTML or ASP.NET aspx Site.
I’ve a problem, when the page is ajax-supportet. After I update a part of the site, the image visible or image-URL for example, with an ajax HTMLRequest, you can’t select the image to set the cropperframe or can do anything else with the image.
As workaroung, i’ll be send a postback and refresh the complete-site. But this is not what I want on an regular ajax-supported page. ;-)

Have someone a tip?

288. Nima - 8th Aug 2007 - 12:12 pm

Please someone help.. :)

I want to use this image cropper, but my language is Asp. But I am newbie, and It will take a long time to understand it. if someone could help me with the backend code for doing the cropping?
you can write to me at. biip19@hotmail.com

287. prerna - 7th Aug 2007 - 10:12 am

javascript function gets called thrice on “onClick” event of a Button. Only if I click the unselected area of a button. If I click any where in the selected area of Button the function is working fine, it gets exected only once.

286. Westy - 6th Aug 2007 - 11:55 pm

Sorry, I don’t. But I can say with utmost confidence that it is simple to use and one of the best image manipulation tools around.

285. Jamie - 6th Aug 2007 - 4:09 pm

Hello!
Thanks very much – Do you happen to have a Free Download link of the Full version – Just to try it of course!

284. Westy - 6th Aug 2007 - 5:48 am

Hello Jamie,

Yes, you’ll need to do the cropping on the application server. I also use CF and I use Efflaire’s CFX_ImageCR3 which is an amazing CFX tag and located at http://efflare.com/ It is really fast and offers amazing quality and will do pretty much anything you want it to do.

It makes image manipulation really easy. So, just assign the values returned from cropper (which are set to hidden form variables) and post to your page which will crop the image. CFX_ImageCR3 makes is really easy to crop. Hostmysite.com offers this CFX tag as part of its ColdFusion hosting plan, but I believe CF8 will offer image manipulation natively.

Hope this helps,

Westy

283. Jamie - 3rd Aug 2007 - 3:10 pm

Hello,
I just have a quick question – I seen this application being used by another site so I figured I would look into where it came from – I seen it being used for www.bandzoogle.com

Anyways – what my question is – and I downloaded and played around with the demo – forced a static size and moved it around etc –

What my question is – how do you spit out the results of the croped image to a new file? in none of the preview example pages do I see where it spits it out. Is this something I have to program in myself – I use Cold Fusion – does anyone have some ready made code that will spit out the selected croped image?/

Thanks very much for your consideration – and again very cool!

Jamie

282. abc - 3rd Aug 2007 - 1:20 pm

i am using cropper.js with ajax form. after submition of form it gives me error like
$(“x1”) has no properties
onEndCrop(Object x1=150 y1=107×2=350 y2=227, Object width=200 height=120)prototype.js (line 182)
endCrop()cropper.js (line 535)
bindAsEventListener(mouseup clientX=0, clientY=0)prototype.js (line 55)
[Break on this error] escapeHTML: function() {

i m not getting where i m going wrong

281. lora - 3rd Aug 2007 - 11:56 am

Q: how to implement zoom for example 2x, 3x on the preview image?

great work!!!

Pages:« 25 … 20 19 18 17 16 [15] 14 13 12 11 10 … 1 » Show All

Leave a comment

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