Tuesday, 1 April 2014

jQuery Crop Image in Asp.net using Jcrop jQuery Plugin and Upload to Folder

Here I will explain how to crop image in asp.net using jcrop jQuery plugin or jQuery image crop and upload in asp.net using jQuery jcrop plugin. Jcrop is a powerful image cropping engine for jQuery by using this jcrop plugin we can add cropping functionality easily to your web application.

Designer Source Code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.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>
    <title>jQuery Crop Image using crop plugin</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function() {
        $('#imgcrop').Jcrop({
        onSelect: getcroparea
            });
        })

        function getcroparea(c) {
            $('#hdnx').val(c.x);
            $('#hdny').val(c.y);
            $('#hdnw').val(c.w);
            $('#hdnh').val(c.h);
        };
    </script>
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src="images/pool.jpg" id="imgcrop" alt="sample image"/>
        <input type="hidden" id="hdnx" runat="server" />
        <input type="hidden" id="hdny" runat="server"/>
        <input type="hidden" id="hdnw" runat="server"/>
        <input type="hidden" id="hdnh" runat="server" />
        <asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop Images" />
        <img id="imgcropped" runat="server" visible="false" />
    </div>
    </form>
</body>
</html>


 Code Behind :

using System;
using System.Drawing;
using System.IO;
using Image = System.Drawing.Image;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btncrop_Click(object sender, EventArgs e)
    {
        try
        {
                string fname = "pool.jpg";
                string fpath = Path.Combine(Server.MapPath("~/images"), fname);
                Image oimg = Image.FromFile(fpath);
                Rectangle cropcords = new Rectangle(
                Convert.ToInt32(hdnx.Value),
                Convert.ToInt32(hdny.Value),
                Convert.ToInt32(hdnw.Value),
                Convert.ToInt32(hdnh.Value));
                string cfname, cfpath;
                Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);
                Graphics grph = Graphics.FromImage(bitMap);
                grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
                cfname = "crop_" + fname;
                cfpath = Path.Combine(Server.MapPath("~/cropimages"), cfname);
                bitMap.Save(cfpath);
                imgcropped.Visible = true;
                imgcropped.Src = "~/cropimages/" + cfname;
            }
            catch (Exception ex)
            {
                throw ex;
            }
    }
}


Download Here 



2 comments: