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

October 06, 2015 , , 1 Comments

In this article i will show you how to crop image using JQuery, In previous article i was show you how to define the crop section of the image using JQuery. In this article i will show you how to upload cropped image into specified directory using ASP.NET c#. Copy this code and paste into your page.

Source code :

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" />
    <script src="jquery.Jcrop.js"></script>
        $(function () {
                onSelect: croparea

        function croparea(c) {

    <form id="form1" runat="server">
        <img src="image/12.PNG" id="cropimage1" runat="server" />
        <input type="hidden" id="coordinate_x" runat="server"/>
          <input type="hidden" id="coordinate_y" runat="server"/>
          <input type="hidden" id="coordinate_w" runat="server"/>
          <input type="hidden" id="coordinate_h" runat="server"/>
        <asp:Button ID="Button1" runat="server" Text="Crop" OnClick="Button1_Click" />
        <img src="" id="cropimg" runat="server" visible="false" />

Code behind code

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Image = System.Drawing.Image;

public partial class cropimage : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    protected void Button1_Click(object sender, EventArgs e)
        string filename = "12.PNG";
        string filepath = Path.Combine(Server.MapPath("~/image"), filename);
        Image outputfile = Image.FromFile(filepath);
        Rectangle cropcoordinate = new Rectangle(Convert.ToInt32(coordinate_x.Value), Convert.ToInt32(coordinate_y.Value), Convert.ToInt32(coordinate_w.Value), Convert.ToInt32(coordinate_h.Value));
        string confilename, confilepath;
        Bitmap bitmap = new Bitmap(cropcoordinate.Width, cropcoordinate.Height, outputfile.PixelFormat);
        Graphics grapics = Graphics.FromImage(bitmap);
        grapics.DrawImage(outputfile, new Rectangle(0, 0, bitmap.Width, bitmap.Height), cropcoordinate, GraphicsUnit.Pixel);
        confilename = "Crop_" + filename;
        confilepath = Path.Combine(Server.MapPath("~/cropimag"), confilename);
        cropimg.Visible = true;
        cropimg.Src = "~/cropimag/" + confilename;


In this aricle i have two file for cropping the image , first to download the file from this url. Now in the code behind use Rectangle class is used to defined the section of the image. Now put the coordinate,which is retrieved from JQuery Jcrop function into the rectangle class. 

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

1 comment: