Image Cropping in ASP.Net Using jQuery and jCrop
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.
What is jQuery? How to use it in ASP.Net Pages?
How to enable jQuery intellisense in Visual Studio 2008?
How to use jQuery intellisense in an external JavaScript file?
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,
Original Image:
onclick="btnCrop_Click" />
Cropped Image:
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.
What is jQuery? How to use it in ASP.Net Pages?
How to enable jQuery intellisense in Visual Studio 2008?
How to use jQuery intellisense in an external JavaScript file?
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,
Original Image:
onclick="btnCrop_Click" />
Cropped Image: