How to crop image and save the cropped image using asp.net & jquery

In this post I am explain How to crop image and save the cropped image using asp.net & jquery


Here I explain how to crop image and save the cropped image using asp.net & jquery. In this example I have used JCropJCrop is the quick and easy way to add image cropping functionality to our web application. Using JCrop I get selected Area of uploaded image and using C#.NET code I have saved croped image.


Download JCrop

Image Upload, Crop & Save using ASP.NET & Jquery
Select Image File :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ASPImageCrop.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" /> 
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <asp:PlaceHolder runat="server">        
        <script src="<%: ResolveUrl("~/Scripts/modernizr-2.5.3.js") %>"></script>
    </asp:PlaceHolder>
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
        </Scripts>
    </asp:ScriptManager>
    
    <div id="body">
        <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
        <section>
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </div>
        </div>
    </footer>
    </form>
</body>
</html>
Posted By : Sourav Mondal