JCrop gives you Powerful image cropping feature using JQuery

If you are someone who is looking for Image cropping functionality in your web application, try considering JCrop. 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. Best of all, JCrop also features clean, well-organized code that works well across most modern web browsers.

JCrop

JCrop

JCrop Feature Overview

  • Attaches unobtrusively to any image
  • Supports aspect ratio locking
  • Supports minSize/maxSize setting
  • Callbacks for selection done, or while moving
  • Keyboard support for nudging selection
  • API features to create interactivity, including animation
  • Support for CSS styling

Cross-platform Compatibility

  • Firefox 3
  • Safari 3
  • Opera 9.5
  • Google Chrome 0.2.x
  • Internet Explorer 6+

Download JCrop from here.

How Do I Get Started with JQuery?

Its simple. All you need to do is download JQuery from here. Place the relevant libraries on your webserver so that you can request them from your application. Also, importantly, ensure that you have  jQuery installed and included.

In the page <head> you’ll need to load the requisite files. That includes:

  • jQuery library
  • Jcrop Javascript
  • Jcrop CSS stylesheet

It should look something like this:

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

Please note: These are only example paths, you probably will need to adjust them when you actually use them, to match the location of the files on your server. Jcrop will not function properly if you don’t.

Invocation

Let’s suppose we have this image our markup:

<img src="flowers.jpg" id="cropbox" />

To convert this into a Jcrop widget, insert the following script:

<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

Jcrop’s default behavior is activated. Since there are no event handlers attached, it won’t do anything cool, but you can see how easy it is to implement Jcrop into your page.

You can follow me on Twitter at http://twitter.com/vaibhav1981

Do stay tuned to Technofriends for more, one of the best ways of doing so is by subscribing to our feeds. You can subscribe to Technofriends feed by clicking here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: