Once again it’s been a long time since I released an update to the JavaScript Image Cropper UI, for reference v1.2.1 was released in 2009 and the previous version in 2006!

There was a comment recently basically saying that it “used to be great but is not supported as the last update was 2009″, which is quite far from the truth; as anyone who contacts me with a problem/question that I can replicate or help with can attest to. The long times between updates with the cropper are purely because the script is stable (thanks in no small part to building on top of stable & well maintained libraries) and continues to work for people who download it and I haven’t had reports of any issues that would require a new general release.

However I have received information from a few people noting that they were having some issues in IE9. Not having that at hand to test I could only go on the few 3rd party reports I had, but now I’ve managed to test in IE9 and have ensured all the examples work. This only required updating to the latest versions of prototype & script.aculo.us and no other changes.

So the 1.2.2 release contains no new code, only updated examples & the IE9 support notice (that you’ll probably need the latest versions of the libs for it to work). This post is more for the “I/its not dead” message.

Comments

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

1. Rebbay - 30th Aug 2011 - 8:26 pm

Hi Dave,

Wish I’d found this before starting work on my own. It looks great and I’m trying to mesh it with some features I’d already coded for mine. Basically I have a list of thumbnails that size according to uploaded dimensions to fill the window. So rather than listening for the page to load I just made that a function which I hit after clicking the thumbnails and changing the source and dimensions of ‘testImage’. So far so good. Problem is the previous croppers don’t go away. How can I destroy the object? Just making ‘new Cropper etc…’ a variable and then trying to kill it is no good. Any ideas off the top of your head?

Thanks for a geat script!

2. Dave - 31st Aug 2011 - 8:08 am

Rebbay:

There is a remove() method on the cropper to remove the cropper from the HTML, for an example check out the dynamically changing image demo (http://www.defusion.org.uk/demos/060519/cropper.php?demoType=dynamic also in the download) it has a CropManager object that keeps and instance of the cropper calls the remove() method on the cropper.

3. Rebbay - 31st Aug 2011 - 1:56 pm

Groan, of course. Sorry for wasting your time (which I’m now doing again). If you’re curious I’ll just be saving the coords to a db for chosen pics and then using aspJPEG to ‘crop’ on the fly. It can send images straight to the browser from memory so much more efficient and all the originals stay intact. Thanks again man.

4. tian tian - 9th Nov 2011 - 4:24 am

very exciting that you can fixed the buy—run on IE9
thanks again

5. Viscus11 - 10th May 2012 - 11:13 am

Hi there,

cropper is not working in IE(all version) browsers.

Please help.

6. Dave - 10th May 2012 - 12:49 pm

Viscus11:

Please confirm that you are including the JS & CSS as per the instructions. If in doubt try the demos/examples that come with it. I have just confirmed these are working in IE.

7. Mikael Prag - 4th Jun 2012 - 2:11 am

Hello Dave!

I just wanted to thank you for this amazing script and share an experience I had with it.

I run 3 croppers on one page, and on the following page I tried to see if the user had cropped the images. I discovered that the event listener for the ‘endCrop’ is placed on the ‘document’ object (because not all end crops is occurring on the image, but sometimes a bit outside). This makes the event handler activate for all objects (maybe by design). In my case this was bad because I didn’t know which images were really cropped by the user.
I solved this by adding a setting to the Cropper object called ‘isCropped’. I set this on the ‘startDrag’ function. Lastly I check this in the ‘endCrop’, making the callbacks only fire if ‘isCropped’ was ever set on the current instance. Maybe this helps someone.

diff, based on 1.2.2:
http://pastebin.com/NfdiHBjB

8. Mikael Prag - 4th Jun 2012 - 2:14 am

Corrected diff:
http://pastebin.com/6NzmH2n4

9. Yuri - 7th Jun 2012 - 5:12 pm

Hi Dave!
Thanx for a nice script, I used it in my code without any problem until now. I discovered that onEndCrop() call back function is called when the document is loaded and the user clicks on any object outside Cropper. In my case it is bad, because onEndCrop() is used to load the click parameters into the form controls. So if the user loads a page and clicks anywhere, those controls are set to zeros, which breaks the logic of my application, because zeros are valid values in my case. Interestingly, if you click on the Cropper area, then the following clicks on the outside of Cropper area do not fire up onEndCrop() call back.

To see the problem, you can use your example code, say, in example-Basic.htm. Load the page, observe that all the controls are empty, now click somewhere outside the image. The controls are set to 0. Now, click inside the image, the controls are properly updated to the related click coordinates. Now click outside image again – no effect on controls anymore. Any idea?

10. Yuri - 7th Jun 2012 - 5:19 pm

Oops, just re-read carefully Mikael Prag’s post, and I think it is exactly what I fighting with! OK, will try his method and see if it helps to disable the calls to onEndCrop() on clicks outside Cropper area.

11. Mikael Prag - 8th Jun 2012 - 4:06 pm

That should be the solution for you as well. Please let me know how goes :-)

12. Yuri - 15th Jun 2012 - 1:34 pm

Hi, Mikael! Yes, your solution worked for me nicely, too. Thank you very much!

13. Alex - 12th Oct 2012 - 12:55 pm

In order to use this tool under IE9 with prototype 1.6 some lines should be changed.

all new div elements like:
new Element( ‘div’, { ‘class’: cNamePrefix + ‘wrap’ + fixOperaClass } );
should be changed to look like this:
new Element( ‘div’ ).addClassName(cNamePrefix + ‘wrap’ + fixOperaClass);

p.s. sorry for my bad english.

Leave a comment

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