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 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
- 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 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.
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:
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.
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.
Filed under: How-To, Tutorials | Tagged: Animation Support, Aspect Ratio, Callbacks, Cropping, Cross Platform Compatibility, Desktop Graphics, Example Paths, Feature Overview, Google, Graphics Applications, Image, Img Src, Internet Explorer 6 Download, Invocation, JCrop, JQuery, Keyboard Support, Link Rel Stylesheet, Markup, Opera 9, Relevant Libraries, Script Src, Web Application, Web Browsers | Leave a comment »