Crop Image in ASP.Net using Script

Step 1: Download project and add scripts into your project under a Script Folder.

Step 2: Follow the below codes.

.Aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="crop_image.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <link href="Scripts/jquery.Jcrop.css" temp_href="Scripts/jquery.Jcrop.css" rel="stylesheet"

        type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"

        temp_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript" src="Scripts/jquery.Jcrop.js" temp_src="Scripts/jquery.Jcrop.js"></script>

    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery('#imgCrop').Jcrop({

                onSelect: storeCoords

            });

        });

        function storeCoords(c) {

            jQuery('#X').val(c.x);

            jQuery('#Y').val(c.y);

            jQuery('#W').val(c.w);

            jQuery('#H').val(c.h);

        };

    </script>

</head>

<body>

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

    <div>

        <asp:Panel ID="pnlUpload" runat="server">

            <asp:FileUpload ID="Upload" runat="server" />

            <br />

            <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />

            <asp:Label ID="lblError" runat="server" Visible="false" />

        </asp:Panel>

        <asp:Panel ID="pnlCrop" runat="server" Visible="false">

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

            <br />

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

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

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

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

            <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />

        </asp:Panel>

        <asp:Panel ID="pnlCropped" runat="server" Visible="false">

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

        </asp:Panel>

    </div>

    </form>

</body>

</html>

.cs Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

using SD = System.Drawing;

using System.Drawing.Imaging;

using System.Drawing.Drawing2D;

public partial class _Default : System.Web.UI.Page

{

    String path = HttpContext.Current.Request.PhysicalApplicationPath + "images\\";

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void btnUpload_Click(object sender, EventArgs e)

    {

        Boolean FileOK = false;

        Boolean FileSaved = false;

        if (Upload.HasFile)

        {

            Session["WorkingImage"] = Upload.FileName;

            String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();

            String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };

            for (int i = 0; i < allowedExtensions.Length; i++)

            {

                if (FileExtension == allowedExtensions[i])

                {

                    FileOK = true;

                }

            }

        }

        if (FileOK)

        {

            try

            {

                Upload.PostedFile.SaveAs(path + Session["WorkingImage"]);

                FileSaved = true;

            }

            catch (Exception ex)

            {

                lblError.Text = "File could not be uploaded." + ex.Message.ToString();

                lblError.Visible = true;

                FileSaved = false;

            }

        }

        else

        {

            lblError.Text = "Cannot accept files of this type.";

            lblError.Visible = true;

        }

        if (FileSaved)

        {

            pnlUpload.Visible = false;

            pnlCrop.Visible = true;

            imgCrop.ImageUrl = "images/" + Session["WorkingImage"].ToString();

        }

    }

    protected void btnCrop_Click(object sender, EventArgs e)

    {

        string ImageName = Session["WorkingImage"].ToString();

        int w = Convert.ToInt32(W.Value);

        int h = Convert.ToInt32(H.Value);

        int x = Convert.ToInt32(X.Value);

        int y = Convert.ToInt32(Y.Value);

        byte[] CropImage = Crop(path + ImageName, w, h, x, y);

        using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))

        {

            ms.Write(CropImage, 0, CropImage.Length);

            using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))

            {

                string SaveTo = path + "crop" + ImageName;

                CroppedImage.Save(SaveTo, CroppedImage.RawFormat);

                pnlCrop.Visible = false;

                pnlCropped.Visible = true;

                imgCropped.ImageUrl = "images/crop" + ImageName;

            }

        }

    }

    static byte[] Crop(string Img, int Width, int Height, int X, int Y)

    {

        try

        {

            using (SD.Image OriginalImage = SD.Image.FromFile(Img))

            {

                using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))

                {

                    bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);

                    using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))

                    {

                        Graphic.SmoothingMode = SmoothingMode.AntiAlias;

                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;

                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;

                        Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);

                        MemoryStream ms = new MemoryStream();

                        bmp.Save(ms, OriginalImage.RawFormat);

                        return ms.GetBuffer();

                    }

                }

            }

        }

        catch (Exception Ex)

        {

            throw (Ex);

        }

    }

}

For more download the project

Ebook Download
View all
Learn
View all