Image Cropping image cropping samples

Jcrop Image Cropping Plugin

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

For more info please check out the official documentation

Editable Form

This example demonstrates the default behavior of Jcrop.

Since no event handlers have been attached it only performs the cropping behavior.

Jcrop Example

An example with a basic event handler.

Here we've tied several form values together with a simple event handler invocation. The result is that the form values are updated in real-time as the selection is changed using Jcrop's onChange handler.

Jcrop Example

Cropped Image Details:

An example implementing a preview pane.

Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane.

Jcrop Example
Jcrop Example

Experimental shader active.

Jcrop now includes a shading mode that facilitates building better transparent Jcrop instances. The experimental shader is less robust than Jcrop's default shading method and should only be used if you require this functionality.


Demonstration of animateTo API method and transitions for bgColor and bgOpacity options. Color fading requires inclusion of John Resig's jQuery Color Animations plugin. If it is not included, colors will not fade.
Jcrop Example

Realtime API

Option Toggles

Change Image

Jcrop Example

Manipulate classes

Example styling tricks. Click the buttons above to change the appearance of Jcrop in real-time.

This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.

Attaching Jcrop to a non-image element.

This is mostly useful to implement other interfaces, such as canvas or over an arbitrary div.

Jcrop Example

An example server-side crop script.

Hidden form values are set when a selection is made. If you press the Crop Image button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it!


  • 8

    Bob Nilson

    Project Manager
  • ...

    Nick Larson

    Art Director
  • 3

    Deon Hubert

  • ...

    Ella Wong



  • 2

    Lara Kunis

    CEO, Loop Inc
    Last seen 03:10 AM
  • new

    Ernie Kyllonen

    Project Manager,
    SmartBizz PTL
  • ...

    Lisa Stone

    CTO, Keort Inc
    Last seen 13:10 PM
  • 7

    Deon Portalatin

    CFO, H&D LTD
  • ...

    Irina Savikova

    CEO, Tizda Motors Inc
  • 4

    Maria Gomez

    Manager, Infomatic Inc
    Last seen 03:10 AM
Bob Nilson 20:15 When could you send me the report ?
Ella Wong 20:15 Its almost done. I will be sending it shortly
Bob Nilson 20:15 Alright. Thanks! :)
Ella Wong 20:16 You are most welcome. Sorry for the delay.
Bob Nilson 20:17 No probs. Just take your time :)
Ella Wong 20:40 Alright. I just emailed it to you.
Bob Nilson 20:17 Great! Thanks. Will check it right away.
Ella Wong 20:40 Please let me know if you have any comment.
Bob Nilson 20:17 Sure. I will check and buzz you if anything needs to be corrected.



General Settings

  • Enable Notifications
  • Allow Tracking
  • Log Errors
  • Auto Sumbit Issues
  • Enable SMS Alerts

System Settings

  • Security Level
  • Failed Email Attempts
  • Secondary SMTP Port
  • Notify On System Error
  • Notify On SMTP Error