jQuery Image Crop Plugin: Jcrop

77°

For the last weeks, several JavaScript image crop resources are published at WebResourcesDepot. This is because, the increase in use of such interfaces as image-based applications are on the rise & many web applications offer their users to edit their avatars besides only uploading them. So, you may need one of them : ) .

Jcrop is a cross-browser jQuery image crop plugin.

jQuery Image Crop Plugin

Some features of Jcrop:

  • Attaches simply to any image in your HTML page
  • Supports aspect ratio locking
  • Callbacks for selection done, or while moving
  • Keyboard support for nudging selection
  • Support for CSS styling
  • Advanced API including animation support

P.S. Thanks to Kelly for the suggestion.

32 Comments
  1. Reply Dainis Graveris September 11, 2008 at 5:09 PM

    Yeah this one is good, already seen one jQuery code with similar feature, but plugin is little better.

  2. Reply Ömer Faruk ZORLU December 9, 2008 at 8:53 PM

    using jcrop for asp.net component. Visit to:
    http://bloq.cenq.net/aspnet-image-croper-component.html

  3. Reply rocks April 30, 2009 at 4:36 AM

    Hi

    This is very cool and rich of functionality, can we integrate this with Java.

    Please suggest.

  4. Reply bham May 29, 2009 at 3:59 PM

    @rocks: no, it will not integrate with java as java unless java has some sort of markup/JS rendering engine that can be embedded.

    In a JAVA environment, you would just build your own controls. It’s silly to even think JS could be used in a JAVA application.

  5. Reply Cricket May 31, 2009 at 12:14 PM

    @rocks: I believe it can be integrated with JSPs, if that’s what you’re asking. Just handle the image manipulation on the Java side once you get the coordinates from jCrop.

  6. Reply Ömer Faruk ZORLU September 22, 2009 at 9:37 AM

    This article is using jcrop for asp.net (component).
    http://www.omerfarukzorlu.com/post/ASPNET-Image-Croper-Component-with-JCrop.aspx

  7. Reply Morgan December 22, 2009 at 9:40 AM

    Hey just wanted to say thank you for the plugin. I replaced an older prototype plugin with this and it is working great!

  8. Reply Sid February 16, 2010 at 1:58 AM

    Am trying to implement this inside an iFrame and it works just fine, wiht the following exception:

    There is a really ugly and thick black border around the iFrame. I tried adjusting the size of the iFrame, but the black border around the iFrame prevails. The styling for the iFrame conatins no margins, borders, or padding? Does anyone know how to fix this?

    Thanks,
    SId

  9. Reply Val February 20, 2010 at 9:38 AM

    @bham

    What do you mean by It’s silly to even think JS could be used in a JAVA application?

  10. Reply Jordan Walker April 8, 2010 at 3:47 PM

    just looking into how to implement this into codeigniter

  11. Reply malik April 21, 2010 at 10:58 AM

    To use it with java you can try build your app with GWT and call Jcrop function as a native method

  12. Reply Rayhan Chowdhury May 6, 2010 at 2:52 PM

    I am just going to give this script a try in my current CodeIgniter project. I hope I will love it as much as JQuery. Any information regarding CodeIginter integration is appreciated!

  13. Reply SRGIT May 22, 2010 at 4:03 AM

    Great scripts, it’s help me..

  14. Reply Sinki July 10, 2010 at 2:14 AM

    Hey!! The link appears to be broken

  15. Reply Umut M. July 10, 2010 at 7:26 AM

    @Sinki,

    Just updated the link.

  16. Reply Vince July 10, 2010 at 12:18 PM

    Hey Link still appears to be broken man, just wondering if you could upload the documentation somewhere. Otherwise looks great!

  17. Reply Umut M. July 11, 2010 at 12:32 AM

    @Vince,

    The original page if down but the download can be found in the Google Code page (download includes various demos, sadly, that seems to be the only documentation).

  18. Reply Igor September 6, 2010 at 1:32 AM

    Do anyone know is it possible to open html page with already opened crop?

  19. Reply rahman December 16, 2010 at 9:29 AM

    you can fetch the coordinates of selection and pass it in query string to a serverside script. which in turn renders a div with the main image as background-image and those passed coordinates as background-position

  20. Reply Michael Pope March 14, 2011 at 2:03 PM

    The link isn’t broken -> the protocol has a typo.

    Website: hhttp://code.google.com/p/jcrop/

    Notice the extra h in http.. typos suck! hehe

  21. Reply Umut M. March 15, 2011 at 4:19 AM

    @Michael Pope,

    Just fixed it. Thanks.

  22. Reply Sandijs July 21, 2011 at 11:41 AM

    Hi, can everyone add double click action to crop the image?

  23. Reply amir liaquat September 12, 2011 at 5:21 PM

    I can’t see the Demo, can someone mention the demo link?

  24. Reply Umut M. September 14, 2011 at 12:51 AM
  25. Reply bakkelun October 3, 2011 at 9:54 AM

    Hi,

    I took the liberty of making a PHP library and putting up an enhanced example page which lets the user upload a file, then crop it with preview.

    Here’s the library: http://hotfile.com/dl/131371190/45e8718/crop.rar.html

  26. Reply bakkelun October 3, 2011 at 9:57 AM

    Forgot to mention: The library supports both direct and file outputting.
    – The “direct” just shows it to the browser,
    – The “file” allows for the cropped image to be saved. The options to the crop are seen in the cropLibrary.php file.

    It’s set to be generic, so it will work with other adapters as well, as long as the provided parameters are provided.

    Also, thanks to the author for a great jQuery plugin. Have been looking for one for a while.

    – bakkelun

  27. Reply ivan November 28, 2011 at 9:36 AM

    jcrob is the best plugin in jquery world =)

  28. Reply HainesFlightsGuy December 28, 2011 at 7:50 PM

    Anyone know of a JQuery cropper that slides the image around beneth a set box size (frame) like when you crop with facebook.

  29. Reply B33J33 February 23, 2012 at 6:41 PM

    Fantastic plugin, finished up a requirement in a single evening with it.

    Thx 🙂

  30. Reply Bob May 17, 2012 at 9:27 AM

    Hey man,

    Great post! Thanks for the info 🙂 This is an awesome plugin – just what I was looking for.

    Bob.

  31. Reply Kyle December 14, 2012 at 3:59 PM

    Haines:
    I was looking for a similar cropper for my site, but can’t seem to find one. This one is still pretty good, but not quite what I need!
    Do me a favour and comment if you do find one! Cheers!

  32. Reply Emb December 28, 2012 at 4:03 PM

    bakkelun: your modified version is no longer available… 🙁

Leave a reply

Search