CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » Image Cropping in ASP.Net Using jQuery and jCrop   You are not logged in.
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Image Cropping in ASP.Net Using jQuery and jCrop

By Satheesh Babu
Posted On Apr 10, 2011
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 11
Print this article.
Category: jQuery/ASP.Net

Subscribe to our feed!

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,

How to slice/edit a portion of image in ASP.Net?

 

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,

Image Cropping in C#, ASP.Net Using jQuery and jCrop

 

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

$('#ImFullImage').Jcrop();

 

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

<script src="_script/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script src="_script/jquery.Jcrop.min.js" type="text/javascript"></script>

    <link href="_script/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

   

    <script type="text/javascript">

        $(function() {                   

            $('#ImFullImage').Jcrop({

                onSelect: updateCoords,

                onChange: updateCoords

            });

        });

        function updateCoords(c) {

            $('#hfX').val(c.x);

            $('#hfY').val(c.y);

            $('#hfHeight').val(c.h);

            $('#hfWidth').val(c.w);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:HiddenField ID="hfX" runat="server" />

    <asp:HiddenField ID="hfY" runat="server" />

    <asp:HiddenField ID="hfHeight" runat="server" />

    <asp:HiddenField ID="hfWidth" runat="server" />

    <div>   

     Original Image: <br />

       <asp:Image ID="ImFullImage" ImageUrl="~/Images/Cartoons.jpg" runat="server" /><br />

        <asp:Button ID="btnCrop" runat="server" Text="Crop Image"

            onclick="btnCrop_Click" /><br />

    </div>

    <br />

    <div>

      Cropped Image:<br />

        <asp:Image ID="imCropped" runat="server" />

    </div>

    </form>

</body>

</html>

 


Recent Articles

Default.aspx.cs

  public void CropImage(string path, int X, int Y, int Width, int Height)

    {

        using (System.Drawing.Image img = System.Drawing.Image.FromFile(path))

        {

            string ImgName = System.IO.Path.GetFileName(path);

            using (Bitmap bmpCropped = new Bitmap(Width, Height))

            {

                using (Graphics g = Graphics.FromImage(bmpCropped))

                {

                    Rectangle rectDestination = new Rectangle(0, 0, bmpCropped.Width, bmpCropped.Height);

                    Rectangle rectCropArea = new Rectangle(X, Y, Width, Height);

                    g.DrawImage(img, rectDestination, rectCropArea, GraphicsUnit.Pixel);

                    string SaveTo = Server.MapPath(".") + @"\CroppedImages\" + ImgName;

                    bmpCropped.Save(SaveTo);

                    string CroppedImg = Request.ApplicationPath + @"/CroppedImages/" + ImgName;

                    imCropped.ImageUrl = CroppedImg;

                }

            }

        }

    }

    protected void btnCrop_Click(object sender, EventArgs e)

    {

       int x, y, w, h;

        if (!int.TryParse(hfX.Value, out x))

        {

            //Set default x value

            x = 0;

        }

 

        if (!int.TryParse(hfY.Value, out y))

        {

            //Set default y value

            y = 0;

        }

 

        if (!int.TryParse(hfHeight.Value, out h))

        {

            //Set default height value

            h = 0;

        }

 

        if (!int.TryParse(hfWidth.Value, out w))

        {

            //Set default width value

            w = 0;

        }

        CropImage(Server.MapPath(".") + @"/Images/Cartoons.jpg", x, y, w, h);

 

    }

 

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

 

Downloads

Source code

 

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. Download the code attached with this article and see it in action.

Happy Coding!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    Crop Image
    How to crop image in C# and then upload crop image in database. please help me. Ok
    Crop Image
    How to crop image in C# and then upload crop image in database. please help me. Ok
    wscs
    sdc
    crop
    ma re android phone ma crop hoy aevi crop jot vi se
    crop
    ma re android phone ma crop hoy aevi crop jot vi se
    crop
    ma re android phone ma crop hoy aevi crop jot vi se
    crop
    ma re android phone ma crop hoy aevi crop jot vi se
    restricting the height and width while selecting the original image for cropping
    the solution allows selection of any height and width of the original image. But want to restrict the selection area of the image to 200X250 (eg: height and width restriction while uploading gmail profile photo).

    How to achieve this?

    ebuztvm@gmail.com
    thanks
    hai thanks for this code........
    Error
    Hi i am using the above but i am getting error here plz do needful ASAP...
    jcrop
    its is very helpfull code thnkx