Jul 24 2007

YUI-based Image Cropper Widget

Published by Julien Lecomte at 4:49 pm under Web Development

I wrote a YUI-based image cropper widget that allows you to easily select which region of an image you’d like to crop. This widget works on all A-grade browsers in both standards mode and quirks mode. Attached is a screenshot.

To instantiate the widget, include the following source files in your web page (requires YUI >= 2.3)


<!-- CSS -->
<link rel="stylesheet" type="text/css" href="image-cropper.css">

<!-- Dependencies -->
<script src="yahoo-dom-event.js"></script>
<script src="dragdrop-min.js"></script>

<!-- Image cropper source file -->
<script src="image-cropper-min.js"></script>

Then, place an image on your page:

<img src="myImage.jpg" id="myImageId">

Finally, instantiate the widget:

<script>
    var cropper = new YAHOO.widget.ImageCropper("myImageId");
</script>

You can then retrieve the geometry of the crop region by calling:

var region = cropper.getCropRegion();

This should work right out of the box. You can also pass an optional configuration object to the constructor to set the initial geometry of the crop region as well as a constraint on the ratio width / height. For more information, please refer to the documentation inline in the source code.

Here is a live demo of the image cropper widget. You can also download an archive containing all the necessary source code.

30 Responses to “YUI-based Image Cropper Widget”

  1. # Jakob Kruseon 30 Jul 2007 at 3:37 am

    The up/down and left/right resize handles fail (Invalid argument) here in Internet Explorer 7.0 on Windows XP.

  2. # Ashishon 30 Jul 2007 at 4:55 am

    That was simply awesome. It can have lot of applications !

  3. # Mikeon 30 Jul 2007 at 6:00 am

    Nice widget, is this an official YUI widget or will it be? It’s good to see more specific widgets as long as they remain generic enough to be used in every project. Keep it up!

    PS. I don’t even use YUI (I use the Microsoft Ajax Control Toolkit) but I think the competition is very healthy .

  4. # dov katzon 30 Jul 2007 at 6:12 am

    Nice tool. I added “noresize” support to the config object, and altered your _createHooks() to read:

    if(! noresize) _createHooks();

    Perhaps it’s worth adding this to the api?

  5. # Chris Heilmannon 30 Jul 2007 at 7:07 am

    Splendid! A really useful feature would be to create a custom event you can subscribe to that returns the crop area. You can fire the event when there is a double click on the cropper DIV.

  6. # Julien Lecomteon 30 Jul 2007 at 8:56 am

    @Jakob
    @dov

    I just pushed a new version that supports noresize and fixes the IE issue with the resizers.

  7. # dov katzon 30 Jul 2007 at 9:56 am

    another bug (and fix) - the “background:” attribute as applied to the image-cropper will cause a re-load of the URL every time you hit it. This is fine if the image is in cache, but if it’s a dynamic URL which you generate, such as is often the case with image editing tools, you will cause some server activity every time you reposition the crop area.

    I fixed this in the JS on line 263 by adding a “#” to the end of the URL:

    _cropElem.style.background = “url(” + img.src +((img.src.indexOf(’#'==-1))?’#':”) +”)”;

  8. # noahon 30 Jul 2007 at 7:57 pm

    Some sort of hook that fires at the end of a resize would be nice. onResize or something like that.

  9. # Julien Lecomteon 30 Jul 2007 at 8:07 pm

    @noah

    I just pushed a new version with an onChangeEvent that’s fired when the crop region geometry (position or size) has changed.

  10. # Arthur Caseon 30 Jul 2007 at 9:12 pm

    This works great in Safari 3 beta, but in the lastest version of Safari 2 (2.0.4 (419.3) it’s not loading in the widget at all.

  11. # johnwhiteon 30 Jul 2007 at 9:34 pm

    Very nice. I use prototype/scriptaculous now, but I’m considering YUI.

    The image crop utility I use now has a “live preview” feature that’s really handy. It’s found at http://www.defusion.org.uk/ - any chance of something like that?

  12. # bruce warrenon 31 Jul 2007 at 1:39 am

    Hi!

    Can you give me an example on how can I create an ImageCropper instance setting the ration ?

    new YAHOO.widget.ImageCropper( “myImage”, ???);

    Thanks

  13. # Script Artists | Bookmarks #5: Hilfreiches und Kurzweiligeson 31 Jul 2007 at 4:33 am

    [...] YUI-based Image Cropper Widget [...]

  14. # Julien Lecomteon 31 Jul 2007 at 8:43 am

    @bruce

    var config = {
    xyratio: 1.2
    };

    new YAHOO.widget.ImageCropper( “myImage”, config );

    This means that the region’s width will be 1.2 times the region’s height. Use 1.0 for a square.

  15. # louis won 02 Aug 2007 at 5:13 am

    I’m on Safari 2.0.4 here. Notice that when i first visit the demo nothing happens, if i reload, the resize appears. This happened on two test cases.

  16. # tobyon 02 Aug 2007 at 10:39 am

    nice.
    If you’re at a loose end now, you could add shift key to constrain, + alt to expand selection from centre. I know it’s not supposed to be photoshop, but…

  17. # brian mason 03 Aug 2007 at 9:27 am

    This is nice!
    One thing I’d like to see is the ability to see if the ability to turn it off on the image.

    I wanted to use this so I crack a button next to the picture, it goes into crop mode, select my area, send an ajax post back to the server and my server gives back the url of a newly cropped image and replaces the image’s .src.
    I tried “delete” (checked return whcih is ‘true’) and changing the src of the image but that doesn’t seem to do it.

  18. # Julien Lecomteon 03 Aug 2007 at 3:01 pm

    @arthur
    @louis

    I pushed a new version that fixes the issue you reported on Safari 2.

  19. # Links for 8/6/07 [my NetNewsWire tabs]on 06 Aug 2007 at 7:37 am

    [...] Julien Lecomte’s Blog » YUI-based Image Cropper Widget [...]

  20. # Links for Mon 30 Jul 2007 through Mon 6 Aug 2007 | Joseph Scott's Blogon 07 Aug 2007 at 9:38 am

    [...] Julien Lecomte’s Blog - YUI-based Image Cropper Widget - Image cropper tool that is built on top of YUI. Tags: yui javascript imagecropper photo [...]

  21. # Léonieon 25 Sep 2007 at 3:29 pm

    Wow this is a really great script. I checked other ones done with prototype or mootools, but this one seems to be the most elegant…
    We need to implement that in our site.

    Léonie.

  22. # Austinon 16 Oct 2007 at 12:06 pm

    This is really impressive! Thanks!

    One thing I’m struggling with though - I’m trying to implement it inside a YUI Panel. It works, but the mask does not appear. I’ve tried switching to an overlay or a non-modal panel, but it the mask still does not appear…

  23. # Austinon 16 Oct 2007 at 12:14 pm

    Murphy’s Law. Found the solution as soon as I posted. I changed the class name of the mask to cropMask (in the .css and .js) and it works great. I supposed it was conflicting with the panel mask…

    Thanks again!

  24. # Marcelo Roberto Pression 17 Oct 2007 at 3:15 pm

    Thank you very much. Fantastic job.

  25. # Jameson 23 Nov 2007 at 1:08 pm

    Fantastic control. Can you give advice on how best to change the image once the control has been created?

  26. # Samon 05 Dec 2007 at 7:15 pm

    Is there anyway that we could set the minimum width and height for the crop region?

  27. # Elenaon 17 Dec 2007 at 9:50 am

    Hi Julien,

    The tool is awesome!
    I’ve got a question, how can I set equal proportions when dragging the hooks (top-left, top-right, bottom-left and bottom-right) on the cropping tool?

    Is it possible to use ‘xyratio’ to do this?

    thanks!

  28. # Julien Lecomteon 17 Dec 2007 at 10:54 am

    @Elena

    Yes, use the xyratio config property.

  29. # mukeshon 19 Dec 2007 at 3:55 am

    how we can set minimum width and height of crop area ?

  30. # Anion 03 Jan 2008 at 4:31 am

    How can I apply the minimum width and height for the crop region, say minimum width = 120 and minimum height=90 ?