Click here to Skip to main content
13,048,406 members (112,877 online)
Rate this:
Please Sign up or sign in to vote.
See more:

I am in a task which needs to crop the image and display the image there it self.I have successfully done the cropping part but unable to set the cropped image in the field.Can anyone help me in this.

the code goes here


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head  runat="server">
     <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
     <script type="text/javascript" src="scripts/jquery.min.js"></script>
     <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js">
     <script type="text/javascript">
         $.extend($.imgAreaSelect, {
             animate: function(fx) {
                 var start = fx.elem.start, end = fx.elem.end, now =,
            curX1 = Math.round(start.x1 + (end.x1 - start.x1) * now),
            curY1 = Math.round(start.y1 + (end.y1 - start.y1) * now),
            curX2 = Math.round(start.x2 + (end.x2 - start.x2) * now),
            curY2 = Math.round(start.y2 + (end.y2 - start.y2) * now);
                 fx.elem.ias.setSelection(curX1, curY1, curX2, curY2);
             prototype: $.extend($.imgAreaSelect.prototype, {
                 animateSelection: function(x1, y1, x2, y2, duration) {
                     var fx = $.extend($('<div />')[0], {
                         ias: this,
                         start: this.getSelection(),
                         end: { x1: x1, y1: y1, x2: x2, y2: y2 }
                     if (!$.imgAreaSelect.fxStepDefault) {
                         $.imgAreaSelect.fxStepDefault = $.fx.step._default;
                         $.fx.step._default = function(fx) {
                             return fx.elem.ias ? $.imgAreaSelect.animate(fx) :
                     $(fx).animate({ cur: 1 }, duration, 'swing');
         $(function() {
         ias = $('img#ImagePreview').imgAreaSelect({ fadeSpeed: 400, handles: true,
                 instance: true
             $('button#rectangle').click(function() {
                 // If nothing's selected, start with a tiny area in the center
                 if (!ias.getSelection().width)
                     ias.setOptions({ show: true, x1: 199, y1: 149, x2: 200, y2: 150 });
                 ias.animateSelection(100, 75, 300, 225, 'slow');
    <form id="form1"  runat="server">
    <asp:Panel ID="panel1" runat="server">
        <asp:Label ID="Label1" runat="server" Text="Name" 
        <asp:TextBox ID="TextBox1" runat="server" Visible="False">    
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
            style="top: 345px; left: 641px; position: absolute; height: 26px; width: 56px" 
            Text="Submit" />
        <div id="Imagediv">
            style="width: 319px; removed 62px; removed 507px; removed: absolute; height: 275px">
            <asp:FileUpload ID="FileUpload1" runat="server" 
                style="width: 217px; top: 239px; left: 60px; position: absolute; height: 22px" />
                <asp:ScriptManager ID="ScriptManager1" runat="server">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <asp:Image runat="server" ID="ImagePreview" Height="164px" Width="125px" 
                        style="position: absolute; top: 3px; left: 4px; width: 310px; height: 221px; margin-bottom: 6px" />


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.IO;

public partial class Default3 : System.Web.UI.Page
    SqlConnection con = new SqlConnection("Data Source=ADMIN-PC;Initial Catalog= Official;Integrated Security=true;");
    protected void Page_Load(object sender, EventArgs e)
    protected void Button2_Click(object sender, EventArgs e)
        string path = Server.MapPath("Image/");
            string ext=Path.GetExtension(FileUpload1.FileName);
            if (ext== ".jpg" || ext== ".png")
                string name="~/Image/"+FileUpload1.FileName;
                string s = "insert into immage values('"+TextBox1.Text.Trim()+"','"+name+"')";
                SqlCommand cmd= new SqlCommand(s,con);
                Response.Write("Your file has been uploaded");
                Response.Write("You can upload only jpg and png files");
            Response.Write("Please select a file");
        Session["ImageBytes"] = FileUpload1.FileBytes;
        ImagePreview.ImageUrl = "~/Handler.ashx";
Posted 21-Sep-12 6:35am
Updated 21-Sep-12 6:42am
Wes Aday104.2K

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

I searched and found some different ways of doing the task. These might be helpful for you.

Using jCrop
1. Upload and Crop Images with jQuery, JCrop and ASP.NET[^]
2. Cropping image using jQuery, Jcrop with AspJpeg in ASP.NET[^]
3. Image Cropping in ASP.Net Using jQuery and jCrop[^]
4. Image Upload, Crop and Resize with ASP.NET MVC jQuery Uploadify and jCrop[^]

Codeproject Article
Create an image cropping control[^]

StackOverflow Discussion using Handler class
C# Crop then scale the Cropped Image[^]

Tadit Dash 21-Sep-12 17:07pm
Please don't forget to mark this as accepted answer, if it has helped you in any way, so that it will be helpful for others to know the solution easily...
You will also be awarded with points for accepting... :) :)

Thanks a lot...
Tadit Dash 25-Sep-12 2:04am
Thanks for accpeting...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 21 Sep 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100