jQuery has been around sometimes now. It is excellent JavaScript library to simplify client side scripting. It has number of plugins that is really valuable for applications and website projects. One of them is JCrop that is used to crop images. Image cropping is a technique that is used to select a portion of image to save it as separate image and later we can use it as another image. There are many image cropping techniques available but JCrop is simple and easy to use image cropper with small amount of coding. You can use it with an uploaded image and can crop the uploaded image according to user requirements or you can use it with images already stored in your application.
1.Open Visual Studio 2010
2.File > New > Web Site
3.Visual Basic or Visual C# > ASP.NET Empty Web Site
4.Right click on web site > Add New Item > Web Form
5.Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and jQuery Jcrop plug-in and include below files in this folder.
jquery-1.7.2.min.js
jquery.Jcrop.min.js
6.When you download jQuery Jcrop plugin, it includes “css” folder. Copy this folders in your website.
7.Right click on website > New Folder (Name the folder as “Images”). Include any image in this folder.
8.Add a tag in between tag of Default.aspx page. You have to give reference for jQuery and jQuery Jcrop plug-in as below.
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.Jcrop.min.js"></script>
9.Add a tag in between tag and give reference for css file as below.
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" media="screen" />
10.Add another tag in between tag and write code below in it.
<script type="text/javascript">
$(document).ready(function () {
$('#imgToCrop').Jcrop({
onSelect: updateCoordinates
});
});
function updateCoordinates(p) {
$('#XCoordinate').val(p.x);
$('#YCoordinate').val(p.y);
$('#Hight').val(p.h);
$('#Width').val(p.w);
};
</script>
11.Write code below in between