How to crop image using .Net and jQuery

Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio. Depending on the application, this may be performed on a physical photograph, artwork or film footage, or achieved digitally using image editing software. The term is common to the film, broadcasting, photographic, graphic design and printing industries.

In the printing, graphic design and photography industries, cropping refers to removing unwanted areas from a photographic or illustrated image. One of the most basic photo manipulation processes, it is performed in order to remove an unwanted subject or irrelevant detail from a photo, change its aspect ratio, or to improve the overall composition. In telephoto photography, most commonly in bird photography, an image is cropped to magnify the primary subject and further reduce the angle of view when a lens of sufficient focal length to achieve the desired magnification directly is not available. It is considered one of the few editing actions permissible in modern photojournalism along with tonal balance, colour correction and sharpening. A crop made from the top and bottom of a photograph may produce an aspect which mimics the panoramic format (in photography) and the widescreen format in cinematography and broadcasting. Both of these formats are not cropped as such, rather the product of highly specialised optical configuration and camera design.

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.

Open Visual Studio 2010
File > New > Web Site
Visual Basic or Visual C# > ASP.NET Empty Web Site
Right click on web site > Add New Item > Web Form
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

When you download jQuery Jcrop plugin, it includes “css” folder. Copy these folders in your website.

Right click on website > New Folder (Name the folder as “Images”). Include any image in this folder.

Add a <script> tag in between <head> tag of Default.aspx page. You have to give reference for jQuery and jQuery Jcrop plug-in as below.

Listing 1: Reference to jQuery plug-in

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.Jcrop.min.js"></script>

Add a <link> tag in between <head> tag and give reference for css file as below.

<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" media="screen" />

Add another <script> tag in between <head> tag and write code below in it.

Listing 2: Adding <script> tag between <head> tag

<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>

Write code below in between <form> tag.

Listing 3: Adding code in between <form> tag

<div>
       <img class='imagem_artigo' 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.

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

Listing 4: Illustrates the code in case of button click event

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";
}

Listing 5: Illustrates the VB.NET way

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. Now you can see it in your browser.

Figure 1: Sample Output

Conclusion

This is all on the cropping of a image using jQuery. Feel free to share any queries.