How to crop image using jQuery and Jcrop in ASP.NET?

Question

How to get all values along with control Id using Jquery in ASP.NET?

Answer 1

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

tag

<div>
       <img src="Images/Desert.jpg" id="imgToCrop" alt="" />
       <asp:HiddenField ID="XCoordinate" runat="server" />
       <asp:HiddenField ID="YCoordinate" runat="server" />
       <asp:HiddenField ID="Hight" runat="server" />
       <asp:HiddenField ID="Width" runat="server" />
       <br />
       <asp:Button ID="Button1" runat="server" Text="Crop" onclick="Button1_Click" />      
       <br />
       <br />
       <asp:Image ID="cropedImage" runat="server" Visible="false" />
</div>

You have to give your own image name in “src” attribute of “img” tag.

12.Write code below in button click event of code behind file

C#

protected void Button1_Click(object sender, EventArgs e)
{            
       int x = Convert.ToInt32(XCoordinate.Value);
       int y = Convert.ToInt32(YCoordinate.Value);
       int h = Convert.ToInt32(Hight.Value);
       int w = Convert.ToInt32(Width.Value);

       string imagePath = Server.MapPath("Images/Desert.jpg");

       System.Drawing.Image imgToCrop = Bitmap.FromFile(imagePath);

       Bitmap btmap = new Bitmap(w, h, imgToCrop.PixelFormat);
       Graphics graphcs = Graphics.FromImage(btmap);
       graphcs.DrawImage(imgToCrop, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
       string cropedImagePath = Server.MapPath("Images/Desert2.jpg");
       btmap.Save(cropedImagePath);
       cropedImage.Visible = true;
       cropedImage.ImageUrl = "Images/Desert2.jpg";
}

VB.NET

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
       Dim x As Integer = Convert.ToInt32(XCoordinate.Value)
       Dim y As Integer = Convert.ToInt32(YCoordinate.Value)
       Dim h As Integer = Convert.ToInt32(Hight.Value)
       Dim w As Integer = Convert.ToInt32(Width.Value)

       Dim imagePath As String = Server.MapPath("Images/Desert.jpg")

       Dim imgToCrop As System.Drawing.Image = Bitmap.FromFile(imagePath)

       Dim btmap As New Bitmap(w, h, imgToCrop.PixelFormat)
       Dim graphcs As Graphics = Graphics.FromImage(btmap)
       graphcs.DrawImage(imgToCrop, New Rectangle(0, 0, w, h), New Rectangle(x, y, w, h), GraphicsUnit.Pixel)
       Dim cropedImagePath As String = Server.MapPath("Images/Desert2.jpg")
       btmap.Save(cropedImagePath)
       cropedImage.Visible = True
       cropedImage.ImageUrl = "Images/Desert2.jpg"
End Sub

First we get the coordinates as integer values then we get the image path. We have created an object of Image class and retrieved the pixel data from the image using Bitmap class. We have created an object of Bitmap class by providing width, height and pixel format. We have created an object of Graphics class for the image. Then we have called the DrawImage() method by providing image, destination and source rectangles. Then we have saved cropped file in our destination path. At the end, we have set visible property of cropped image to true and set the URL of the cropped image.

13.Now you can see it in your browser.