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

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

651. Steven R - 19th Jan 2010 - 1:47 pm

tirengarfio,
I managed to use this cropper with the lytebox2. It is allows for additional content rather than just images like in line HTML, new pages and iframes. Use this with your cropper on a different page for a seamless application.

Good Luck

652. tirengarfio - 19th Jan 2010 - 5:47 pm

Steven R:

thanks for your recomendation, but could you give a link? Anyway I prefer an open source one.

Javi

653. John - 21st Jan 2010 - 7:33 am

Is there a way for me to increase the size of the preview image, rather than have it be minWidth x minHeight?

654. Steven R - 21st Jan 2010 - 8:37 am

Javi,

Check out http://www.dolem.com/lytebox/, this just help you do what you are trying to acheive. It worked for me perfectly.

Steven

655. John - 21st Jan 2010 - 9:22 am

please disregard my previous, I delved into the code and changed it to suit my needs by changing the Cropper.ImgWithPreview subInitialize and subDrawArea functions.

656. Hitesh - 30th Jan 2010 - 1:14 pm

Hi Dave its a good work.

But when i

give path of correct path of scriptaculous.js by removing the google API’s , it does not work pls help!!

657. Ron - 30th Jan 2010 - 5:47 pm

hello dave,

does the cropper ui allow to define a moving area or margins at the top, left, bottom, right, so that the selection can be only moved within this area and not within the whole image?

thx,
ron

658. Dave - 30th Jan 2010 - 6:54 pm

Hitesh: There must be a problem with your path or version of script.aculo.us or prototype. Please ensure they’re actually being loaded.

Ron: No the cropper as released does not support this, however if you look at the boundary checking stuff I’m sure you can easily add this functionality to use custom supplied boundaries/margins.

659. SEO Agency - 5th Feb 2010 - 5:20 am

Realy this is great work.

660. rv0 - 11th Feb 2010 - 5:20 pm

I think I found a bug here.. Or maybe it is a feature.. however, it’s very annoying in my usecase. If anyone knows a way around it without adjusting the cropper.js itself, please tell me.
onEndCrop gets called every time you click somewhere on the page. See for yourself: add

JavaScript:

  1. alert(‘foo’);

in the callback function in one of the demo’s.. you’ll see an alert wherever you click on the page.
Why is this? isn’t it supposed to be called when you release the crop or a handle?

Any workarounds?
thx in advance.

661. Dave - 11th Feb 2010 - 5:31 pm

rv0: This is discussed in the Google Group (http://groups.google.com/group/javascript-image-cropper-ui/browse_thread/thread/bce25c366480b6be) with reasons for it working that way and details of a possible work around.

Please discuss it on the Google Group if you want more details on this.

662. rv0 - 11th Feb 2010 - 7:47 pm

thanks for pointing me in the right direction.. i’ll get back on that in the google group.

663. John - 12th Feb 2010 - 5:02 am

Hello,
is there a way to dynamically change the selected area?

I want to have two radio buttons such as “Use selected area” and “Use whole image”.. and when the user chooses the latter i want to change the dimensions od the cropper to cover the whole image instead of the initial size it loads with.

thanks

664. Dave - 12th Feb 2010 - 11:13 am

John, take a look at the examples which remove and re-apply a cropper you should be able to rework those for your situation.

665. Mike - 12th Feb 2010 - 12:00 pm

There doesn’t seem to be a way to destroy the instance that is created. This would be useful for this being built into AJAX applications.

666. John - 13th Feb 2010 - 1:27 am

Hi Dave,
thanks for the reply. I’m looking at the demo and trying to merge it with my preview code but having a bit of a trouble..

here is the code i currently have (straight from demo).. now where would i put the function to when the user clicks it, it would resize the cropper to the height and width of the picture?

thank you
[lang]
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;
}

/**

* Attaches/resets the image cropper
*
* @access private
* @return void
*/

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

667. tirengarfio - 17th Feb 2010 - 8:06 pm

Hi,

i cannot see properly the image cropper in IE6/7/8. In Firefox no problem.

This is my attempt:

http://www.tiregarfio.byethost17.com/web/frontend_dev.php/miembros/cambiarAvatarOK/id/1

Login: fer
Password:m

I have just installed Windows XP/IE6/78 in a virtual machine on Linux,
so any comment or idea or whatever will be wellcome. :)

Regards

Javi

668. David - 22nd Apr 2010 - 6:00 pm

I’m trying to build in a zoom selector which will load a larger version of the image to be cropped if the user wants to. SO far I have been unable to call anything that would re-initilize the cropper and define the greyed out area as part of the bigger image, the selection area remains at the size of the original image loaded… How do I do this?

669. Dave - 23rd Apr 2010 - 12:34 pm

David: I’m not sure what you’re trying to achieve nor what the problem you are experiencing is. Can you please post your question on the google group (http://groups.google.com/group/javascript-image-cropper-ui/) with either a live example or some code snippets.

670. Farhan Sabir - 23rd Apr 2010 - 9:13 pm

Hi,

I wanted to know how to use this utility.

I want to save the resulting cropped image as a new file. Is that possible or is it for display only?

Thanks
Farhan

671. Dmitry - 4th May 2010 - 9:48 am

Hi!
Is someone tested this library on IE7-8, seems it have a bug on it.
On my site cutting area didn’t displayed in IE 8, especially if you call this page by AJAX. for all other browsers it works good (didn’t tested on ie6) :(.

672. Peter - 18th May 2010 - 8:49 pm

Hi!
I would like to use this script but there is one important problem I didn’t solve. How can I improve quality of cropped image? Default it use approx. 50% compresion and it is too much.
Can you help me?
Thanks

673. Dave - 18th May 2010 - 9:24 pm

Hi Peter,

The cropper UI doesn’t perform any cropping of the image at all. Please look at your server side implementation to figure out why it is compressing all images at 50%.

[...] Image Cropper???? | Image Cropper???? | Image Cropper???? [...]

675. mike - 1st Jun 2010 - 10:09 pm

First of all. I really love your work. Nice Job!
But I have the following problem.
Before the cropper and all the other UI stuff code i inserted a function for making thumbnails (PHP). The function itself is working but it makes the cropper unfunctional. Everything is displayed as usual but the select frame isnt there. Even if i use an image that wasnt even touched by my PHP function the cropper wont show.

Any idea?

676. Dave - 2nd Jun 2010 - 6:53 am

Mike,

Really there is not enough information there that I can even guess at your problem. I suggest checking that the files are included properly and you are not getting and JavaScript errors. If you continue to have problems please post more details on the Google group.

677. mike - 2nd Jun 2010 - 9:17 am

Dave,

I understand what you mean. Can you give me the link to the google group?

678. Dave - 2nd Jun 2010 - 9:18 am

Mike,

It is in the links section at the top of the page and in the Next Steps > Feature Requests & Bug Reports section just before the comments.

679. Henrik - 5th Jun 2010 - 10:18 am

Dave, thank you very much for an excellent cropping-solution! :)

The crop area changes or resets when the user clicks outside the crop area. Is it possible to disable this behavior so the crop area doesn’t change?

(I haven’t been able to find this question in the comments nor in the Google Groups-discussion.)

680. Dave - 7th Jun 2010 - 3:43 pm

Henrik,

That sounds like an integration issue as I’ve not heard any mention of that before. Please post a link, an example or more detail on the Google group.

681. Henrik - 9th Jun 2010 - 1:56 pm

Thanks for your reply!

The same thing happens on your demo page with Firefox 3.6.3, Opera 10.53 and IE 8.0.

How to recreate (please take a look at the links for screenshots):
1) Define a crop area: http://img17.imageshack.us/i/jscropperui1.jpg/

2) Click somewhere outside the crop area. The crop area is changed: http://img64.imageshack.us/i/jscropperui2.jpg/

682. Henrik - 9th Jun 2010 - 2:01 pm

Sorry for double posting! :(

I couldn’t see the comment I made yesterday, so that’s why I made another comment. After posting the new comment I could suddenly see it again.

Please delete this comment and the comment I just made.

683. Dave - 9th Jun 2010 - 2:07 pm

Henrik,

That functionality is by design, you can click and drag on an area of the image to select an area to crop (or click & drag to move, or on the handles to resize the selected area). In fact that is the entire purpose of the cropper.

684. Rubens Cury - 11th Jun 2010 - 7:59 pm

Hi,

I think I found a little bug…

When the image is changed dinamically, and the [displayOnInit] is set [true], the new crop definition is not removing the old crop mark.

So far this situation is occuring only with IE8. For Google Chrome it works fine; the old mark desappear and the new mark show up.

If somebody wants to reproduce this bug, please set [displayOnInit = true] and a valid [onloadCoords] on “example-DynamicImage.htm” test page.

Thanks,
Rubens Cury

685. Rubens Cury - 11th Jun 2010 - 11:16 pm

Just one important consideration…

This bug only will occurs if the [src] image control was not set; In other words, when your [src] image control has an empty image source value.

To solve this bug, instead of leaving an empty image source, set some transparent image and everything works as expected when you change it.

Hope it helps,
Rubens Cury

686. Henrik - 15th Jun 2010 - 8:34 am

Dave, thanks for your reply! You are absolutely correct! Don’t ask me what I was thinking about. ;)

687. Christopher Thomas - 16th Jun 2010 - 2:06 pm

hi,

I had a project where I needed in addition to crop, I needed to zoom and scroll around the image, THEN crop a section of it, when the user uploaded a huge image.

in order to scroll around, I had two choices to put scrollbars and to let the crop area itself be moved around and when it touched the sides, to scroll the image.

What I didn’t find in the system, because I don’t think you can normally do this, is the ability to hook on the drag event when you move the crop area around, I found a way in the end, it’s like this

var po = this;
var cd_draw = CropDraggable.prototype.draw;
CropDraggable.prototype.draw = function(point){

po.moveArea(
this.element.positionedOffset(),
this.element.getDimensions()
);

return cd_draw.bind(this)(point);
};

moveArea is just a class method which takes the current position and dimensions of the crop area, so it can calculate where you are in the image for scrolling and thing like that.

I am sure that this is a hack, but if you also need to hook on the drag event for moving the crop area, try this out and I hope it works great for you!!

if there is a better way to do this, I would love to see it. But everything I tried didn’t work, at the end, this worked, so it’s ok with me.

chris

[...] really about it.  I should also say that all the JavaScript I used was obtained from http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/ It’s a slick piece of code – please check out the site for updates (I believe version 2 [...]

689. Greg - 7th Jul 2010 - 12:43 pm

please help i get these errors when i try load the page with the cropper code.

Error: Draggable is not defined
Error: Cropper is undefined.

i’m not sure what the problem is, thanks Dave

690. Dave - 8th Jul 2010 - 8:41 pm

Greg:

Please ensure that all the dependencies (Prototype, script.aculo.us, etc.) are included – the error messages you’re getting clearly point to the fact that something in the core of script.aculo.us (Draggable) isn’t there.

691. Ares - 9th Aug 2010 - 11:18 am

For those who have problem with IE8 and not showing cropper (and IE7 worked), make sure you use prototype 1.6.1.0, ruby on rails (ruby framework) uses 1.6.0.x branch by default…

692. starho - 11th Aug 2010 - 9:20 am

please help me ,I want two or more previewWrap and not the same size, How should I do? Thanks!!

693. Dave - 11th Aug 2010 - 9:50 am

Starho:

I know someone has done this in the past – they did a custom preview class I think. I’m not sure if it’s in the comments or on the google group. But if you take a look at the preview class and how it works you should be able to write your own pretty easily.

694. Nours312 - 16th Aug 2010 - 10:50 pm

Hi & Thanks !...

1. sorry for my Very bad English :$

2. I use cropper on img in div in position “fixed” and your event don’t accept scroll … if you’ve a parameter, thx to inform me, without I inform solution here

++

695. cosmicice - 17th Aug 2010 - 8:48 am

In reply of post no: 679
Henrik, it is possible to stop creating a new crop box if user clicks outside the current crop box. But if you do that, then resizing of the current crop box doesnt work properly. So resizing has to be stopped too. So, if you want:
-User cannot resize existing cropbox.
-If user clicks outside the current cropbox, nothing happens.
-User can only drag the existing cropbox.

Then change the two methods “startDrag”, and “startResizing” this way:
[lang]
startResize: function(e) {

this.startCoords = this.cloneCoords(this.areaCoords);

//For WTP-1410: If allowzoom is not allowed then user can’t resize cropbox
if(document.getElementById(HiddenZoomTextBox).value==”1”)
{
this.resizing = true;
}
else
{
this.resizing = false;
}
this.resizeHandle = Event.element(e).classNames().toString().replace(/([^N|NE|E|SE|S|SW|W|NW])+/, ‘’);
// dump( ‘this.resizeHandle : ’ + this.resizeHandle + ’\n’ );
Event.stop(e);
},

/**
* Starts the drag
*
* @access private
* @param obj Event
* @return void
*/
startDrag: function(e) {
//mar 1686 allow create new cropbox, and drag that one
if(document.getElementById(HiddenZoomTextBox).value==”1”)
{
this.selArea.show();
this.clickCoords = this.getCurPos(e);

this.setAreaCoords({ x1: this.clickCoords.x, y1: this.clickCoords.y, x2: this.clickCoords.x, y2: this.clickCoords.y }, false, false, null);

this.dragging = true;
this.onDrag(e); // incase the user just clicks once after already making a selection
Event.stop(e);
}
else //mar 1686 dont allow creating a new cropbox
{
this.dragging=false;
}

},
[/lang]

HiddenZoomTextBox is a hidden text box that keeps track of current user permission. It worked for me. Hope it helps.

696. Nours312 - 20th Aug 2010 - 4:04 am

Hi

I change in Cropper.Img.setParams()
setParams:function(){
var dimensions = this.img.getDimensions();
this.imgW = dimensions.width;
this.imgH = dimensions.height;

...
}

to resolve a Bug in FF 3.6.3 when :

$(‘img’).width => “600px”;
$(‘img’).height => “300px”;

$(‘img’).width => “600px”;
$(‘img’).height => “300px”;

@+

697. Alan Zhao - 23rd Aug 2010 - 3:14 am

Hi Dave,

Thanks for the great work. The online passport photo DYI tool 123PassportPhoto.com is using your cropper script. It has helped tens of thousands of users from many contries such as UK, US, China, Germany, etc. making their passport photos. It helps to save 1M+ for the users. Without your script, this success cannot be possible. I have added a link to your site in the about page.

Thanks & regards,
Alan

698. Alan Zhao - 23rd Aug 2010 - 3:33 am

Hi Dave,

In the previous verion, there is a bug in which the cropper sometimes does not show the picture. User need to refresh the webpage. You may want to try it at http://www.123PassportPhoto.com. I will upgrade the cropper to the latest version to see whether it helps to resolve the problem. BTW, if you plan to add a page listing websites that use your script, please add 123PassportPhoto.com.

Thanks & regards,
Alan

[...] jsCropperUI is javascript library based on prototype and scriptaculous. Download library zip form here. Unzip it and paste ‘Cropper’ folder in public/javascript. Step 1 : Include Javascript. [...]

700. Usman Abdul Razzaq - 17th Sep 2010 - 11:23 am

its giving me this error i have include all the mentioned thing within my code
Draggable is not defined
[Break on this error] var CropDraggable = Class.create(Draggable, {
cropper.js (line 134)
Cropper is undefined
[Break on this error] new Cropper.Img(

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

Leave a comment

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