Learning jQuery

You must have seen on various social media sites, where after uploading the images they allow to crop image. It is a must feature these days on social media sites. Believe me, Image management like uploading, re-sizing and Image cropping is really a tough task. But there is a jQuery plugin which allows to crop images using jQuery without any trouble.

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.

It's been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility (or the weeks of coding, testing and debugging). Jcrop also features clean, well-organized code that works well across most modern web browsers.

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
• New: Experimental touch support (iOS, Android, etc)

Cross-platform Compatibility

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

How to use it

First download the plugin and include the reference of the required libraries.

//Code Starts
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
//Code Ends

Place an image on the page.

//Code Starts
<img src="pool.jpg" id="target" />
//Code Ends

Call below jQuery code for cropping the image for basic functionalities.

//Code Starts
<script language="Javascript">
    jQuery(function($) {
        $('#target').Jcrop();
    });
</script>
//Code Ends

This plugin also provide various events to handle and various options that can be used to alter appearance and behavior.

Event Handlers

Jcrop's two primary event handlers are onChange and onSelect.

onSelect : It is callback function called when selection is completed.
onChange : It is callback function called when the selection is moving

Jcrop has a sense of state, whether there is an active selection or not. To detect when the interface is released, there is also a handler for these events:

onRelease: It is callback function called when the selection is released.

Feel free to contact me for any help related to jQuery, I will gladly help you.