How to crop image using jQuery
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.
- 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)
- 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.
This plugin also provide various events to handle and various options that can be used to alter appearance and behavior.
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.