jQuery Image Crop Plugin: Jcrop

56°

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.

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

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

  • rocks

    Hi

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

    Please suggest.

  • bham

    @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.

  • Cricket

    @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.

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

  • Morgan

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

  • Sid

    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

  • Val

    @bham

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

  • just looking into how to implement this into codeigniter

  • malik

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

  • 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!

  • Great scripts, it’s help me..

  • Sinki

    Hey!! The link appears to be broken

  • @Sinki,

    Just updated the link.

  • Vince

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

  • @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).

  • Igor

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

  • rahman

    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

  • 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

  • @Michael Pope,

    Just fixed it. Thanks.

  • Sandijs

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

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

  • 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

  • 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

  • jcrob is the best plugin in jquery world =)

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

  • B33J33

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

    Thx ๐Ÿ™‚

  • Bob

    Hey man,

    Great post! Thanks for the info ๐Ÿ™‚ This is an awesome plugin – just what I was looking for.

    Bob.

  • 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!

  • Emb

    bakkelun: your modified version is no longer available… ๐Ÿ™

Search