Skip Navigation LinksHome > Categories > Code from a Category

Image Cropping in ASP.Net Using jQuery and jCrop



User Name: codelecturer
Name: Mike Chauhan
Contact Me: www.datawebcoder.com/ContactUs.aspx
Home Page: www.datawebcoder.com
6 years of total IT experience including programming, application development, System Maintenance . 3 years of Experienced and expertise in .Net Framework VB, Visual Basic.Net, ASP.Net 2.0, 3.5 and AD... [More]
Viewed Times: 6217
Add Date: 01/07/2012
Image cropping is a technique where a portion of a larger image can be selected and cropped from the original image. This cropped image can then be used separately for our use.

There are large numbers of software available for this type of image editing like Microsoft paint, Picture manager etc. At times, we may want to provide a feature where we can allow our website users to upload an image and crop a part of the image from the original image.

For example, if your website has a feature to create photo album you may allow the users to crop an image and publish it as a profile image.

Moving forward, let’s understand how to achieve this using a jQuery plug-in called jCrop in ASP.Net application.

Steps
1.Create a new Asp.Net project in your Visual Studio 2008 with the language of your choice.
2.Download the new jQuery library from jQuery.com and integrate it into your Asp.Net project. The following Faq’s will help you to integrate jQuery library into your project.
3.Download the latest version of jCrop from jCrop official site. The current version as of this writing is 0.9.8
4.Unzip the file jquery.Jcrop-0.9.8.zip. Copy jquery.Jcrop.min.js file from Jcrop\js and jquery.Jcrop.css, Jcrop.GIF from Jcrop\css to a folder called _script in your project solution. 5.Assuming you have integrated jQuery library, let’s move forward and use the jCrop plug-in to crop an image. For easy understanding, I have copied an image called “Cartoons.jpg” in a folder called Images in our project solution. We will use this image to understand how cropping works using Jcrop plug-in. The solution explore will look like below,



How Image Cropping works in jCrop?

The jCrop plug-in allows the user to select a part of image from a larger image using mouse cursor. The selected part can then moved or changed accordingly to fit our need. Something like below,



How to edit/cut a part of image in ASP.Net?

Once the cropping area is selected like above, the jCrop plug-in will return x,y co-ordinate value which indicates the start of the selection with height and width parameter values. The Jcrop plug-in exposes OnSelect/OnChange event which allows us to capture these values after the selection. The captured values can be sent to the server where we can slice the selected part of the original image using Graphics class in System.Drawing namespace. In our example, the final output will be something like below,



To enable Jcrop on an image, we can use the below code,



In our example, we can capture x,y co-ordinates value, length and width to hidden fields which can be accessed in the code behind file to crop from the original image. To do this, drag 4 HiddenField controls(to capture x,y, height, width), 2 Image controls(1 for original image and another for cropped image) and a Button control to do the crop in your Default.aspx page. On click of the Button, we can crop the image and save it to a folder called CroppedImages using Graphics API in System.Drawing namespace. The cropped image can be finally displayed in the Image control as seen in the above figure.

The final code will be,

Default.aspx


Default.aspx.cs



Include System.IO and System.Drawing namespace for the above code to work.

Conclusion

Thanks to Jcrop plug-in! This made image cropping easier with the use of jQuery library in our web applications. With this, it’s now very easy to provide a image cropping feature in our Asp.Net application with the help of Graphics oriented classes in System.Drawing namespace.

You can refer the jCrop manual for more features and options.

Happy Coding!!

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Details**:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
 
    
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.