Details

Version 1.2.2
Last updated 4th July 2011
Requirements
Demo View demo page
Links
License BSD License
Changelog
1.2.2
  • Support for latest versions of Prototype & script.aculo.us (1.7.0 & 1.9.0 respectively)
  • Tested with & added support notice for IE9
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:

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:

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.

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.

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.

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.

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.

Next Steps

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

Pages: « 16 7 8 9 10 11 12 13 14 15 [16] Show All

751. Lubo - 27th Jan 2012 - 6:40 am

Sorry, I cant see brackets in the previous message. Now I’m posting it without brackets:
If img tag is inserted in a table cell (tag td, tag img, tag td end), then the image disappears …

752. Dave - 27th Jan 2012 - 11:50 am

@Lubo

I’ve had reports before that the cropper doesn’t work within a table cell, but I’ve also had reports that adding the table-layout:fixed style to the table helps.

[...] Prototype JavaScript Image Cropper UI is an unobtrusive script based on Prototype and script.aculo.us. [...]

754. Image Crop UI With Prototype | The Web logix Blog - 11th Apr 2012 - 7:07 pm

[...] Prototype JavaScript Image Cropper UI is an unobtrusive script based on Prototype and script.aculo.us. [...]

755. Mattias - 25th Apr 2012 - 1:02 pm

How do i save the image to a folder afther i crop the image how ?

756. Dave - 25th Apr 2012 - 1:14 pm

Please see the FAQ’s for how to save images, this is not part of the cropper JS.

757. Webmaster Forums - 1st May 2012 - 6:08 pm

Work good with few modifications, but i think using Flash or Silverlight is a better idea for image cropping and manipulation.

758. sommeralex - 21st May 2012 - 6:37 pm

Hello!

I ve implemented your script into my page / and everything works finde except that it is not working with chrome.

Maybe you can help:
http://tapestry.1045711.n5.nabble.com/Javascript-Image-Cropper-with-Chrome-td5713110.html

thx..
alex

759. dvojka - 25th May 2012 - 8:16 am

if you know to save images from cropper you need to use PHP

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;
}

// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
‘load’,
function() {
new Cropper.ImgWithPreview(
‘testImage’,
{
minWidth: 210,
minHeight: 296,
ratioDim: { x: 210, y: 296 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: ‘previewArea’
}
)
}
);

< ?php

//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
$source = imagecreatefromjpeg($image);
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
imagejpeg($newImage,$thumb_image_name,90);
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}

$large_photo_exists = "”;

$thumb_width = “210”;

$upload_path = ”./”;// The path to where the image will be saved
$large_image_name = “castle.jpg”; // New name of the large image
$thumb_image_name = “thumbnail_pic.jpg”; // New name of the thumbnail image
$large_image_location = $upload_path.$large_image_name;
$thumb_image_location = $upload_path.$thumb_image_name;
if (isset($_POST[“upload_thumbnail”]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_POST[“x1”];
$y1 = $_POST[“y1”];
$x2 = $_POST[“x2”];
$y2 = $_POST[“y2”];
$w = $_POST[“width”];
$h = $_POST[“height”];
//Scale the image to the thumb_width set above
$scale = $w/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
//Reload the page again to view the thumbnail
header(“location:”.$_SERVER[“PHP_SELF”]);
exit();
}
?>

760. dvojka - 25th May 2012 - 8:19 am

of course you need also HTML FORM

[...] DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us [...]

762. sathish jayaraj - 8th Jun 2012 - 10:39 am

Is it possible to keep the cropper tool to be constant value like 100*100?
It would be great help if someone say the solution.

763. Dave - 8th Jun 2012 - 11:06 am

Sathish:

Simply set the min & max options to the same value and you’ll get a fix size cropper.

764. Albert E. - 14th Jul 2012 - 4:04 am

Really nicely done! Have you ever thought about moving this to a GitHub project by chance?

765. Cut a section out of an image? | mywebsite - 27th Jul 2012 - 8:27 am

[...] there is rumor of one floating around written as a YUI widget. i have personally used the one found based on prototype. it’s an easy way to incorporate meaningful thumbnails as opposed to just smaller scaled [...]

767. Joey M. - 19th Sep 2012 - 8:04 pm

Great work! Is it possible to limit the crop area to a certain region of the picture? I just want them to be able to crop from a 500×300 pixel rectangle from the center of the picture.

768. Thomas - 19th Oct 2012 - 9:33 am

Is anyone else also have a problem in IE 9. The select box is never visible?

769. Javascript Image Cropper UI | Siti Web Monza - 6th Nov 2012 - 1:42 pm

[...] 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 PrototypeJavaScript framework and script.aculo.us. Similar to other image cropping tools, it also supports aspect ratio, minimum and maximum dimension for the crop areas and dynamic image previewing. This UI is compatible with most popular browsers. Related Posts [...]

770. Jason - 31st Jan 2013 - 1:50 am

I am also having trouble with it working with IE9. Sometimes it works. Sometimes it does not. Seems to work great with all of the other browsers that I have tried. I just downloaded version 1.2.2 yesterday and the IE9 problem is still there.

[...] http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); Filed under: .NET [...]

772. Asif Shah - 12th Mar 2013 - 3:41 pm

Me using IE-8
jsCropperUI.1.2.2 downloaded
Giving the following error:
Line: 17
Char: 1
Error: ‘Class’ undefined
Code: 800A1391
Source: MS jScript runtime error

[...] Image Cropper UI using Prototype & Scriptaculous 03.12.2013, BSD License, by admin. The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in [...]

774. Image Crop UI With Prototype | tutspond - 13th Mar 2013 - 1:23 am

[...] Prototype JavaScript Image Cropper UI is an unobtrusive script based on Prototype and script.aculo.us. [...]

775. Jay Ski - 20th Mar 2013 - 1:49 pm

I’m having a problem successfully saving crop points from last selection.

User enters page—> Crops image—> Saves page, re-loads, cropper should stay in the same position. I’m not sure what the problem is, and I’ve been getting very interesting results.

Here is just the script in my JSP.

Event.observe(window, ‘load’, function() {
new Cropper.ImgWithPreview(‘cropImage’, {
previewWrap : ‘previewWrap’,
minWidth : 80,
minHeight : 80,
ratioDim : {
x : 1,
y : 1,
},
onEndCrop : onEndCrop,
onloadCoords : {
x1 : document.getElementById(“px1”).value,
y1 : document.getElementById(“py1”).value,
x2 : document.getElementById(“px2”).value,
y2 : document.getElementById(“py2”).value,
}
});
});

function onEndCrop(coords, dimensions) {
$(“x1”).value = coords.x1;
document.getElementById(“x2”).value = coords.x2;
document.getElementById(“y1”).value = coords.y1;
document.getElementById(“y2”).value = coords.y2;

$(‘width’).value = dimensions.width;
$(‘height’).value = dimensions.height;
}

I’m quite confused since it sometimes work, and sometimes just completely fails.

Is there something I could be missing? Or another function from cropper.js I could utilize?

Thanks,

– Jay

776. Tony G - 4th Apr 2013 - 10:30 am

Hi, I’m trying to persuade the preview area div to display it’s content in a separate iframe. I thought about firing some simple code on the mouseover event of the ‘testWrap’ div to transfer the background image(?) of the preview div to the target div in the separate iframe but with no luck.

Am I taking the right approach?
Any help appreciated.

777. Best Jquery Image Crop Library | Php Flow - 12th May 2013 - 6:00 am

[...] 5-Javascript Image Cropper UI: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. [...]

778. Javascript draw dynamic line - Tech Forum Network - 29th May 2013 - 2:19 am

[...] I’ve found this very nice script for area selection: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/ [...]

779. Gabriel - 30th May 2013 - 10:48 pm

Hey There. I discovered your blog the usage of MSN. That is
a very neatly written article. I’ll make sure to bookmark it and return to learn more of your useful info. Thank you for the post. I’ll certainly comeback.

[...] Javascript Image Cropper UIThe JavaScript image cropper UI is a very popular image cropper which allows the user to crop an image using an interface with the [...]

Pages:« 16 7 8 9 10 11 12 13 14 15 [16] Show All

Leave a comment

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