Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET jQuery
Hi,
 
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
 
aspx
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
 

 
<!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  runat="server">
    <title></title>
     <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>
     
     <script type="text/javascript">
         $.extend($.imgAreaSelect, {
             animate: function(fx) {
                 var start = fx.elem.start, end = fx.elem.end, now = fx.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);
                 fx.elem.ias.update();
             },
             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) :
                        $.imgAreaSelect.fxStepDefault(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');
             });
         });
</script>  
</head>
<body>
    <form id="form1"  runat="server">
    <asp:Panel ID="panel1" runat="server">
    <div>  
  
        <asp:Label ID="Label1" runat="server" Text="Name" 
            Visible="False">
        
        <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">
            
                <contenttemplate>
                    <asp:Image runat="server" ID="ImagePreview" Height="164px" Width="125px" 
                        style="position: absolute; top: 3px; left: 4px; width: 310px; height: 221px; margin-bottom: 6px" />
                </contenttemplate>
            
                            
        </div>
        </div>
    
    </form>
</body>
</html>


 

aspx.cs
 
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/");
        if(FileUpload1.HasFile)
        {
            string ext=Path.GetExtension(FileUpload1.FileName);
            if (ext== ".jpg" || ext== ".png")
            {
                FileUpload1.SaveAs(path+FileUpload1.FileName);
                string name="~/Image/"+FileUpload1.FileName;
                string s = "insert into immage values('"+TextBox1.Text.Trim()+"','"+name+"')";
 
                SqlCommand cmd= new SqlCommand(s,con);
                con.Open();                
                cmd.ExecuteNonQuery();
                con.Close();
                Response.Write("Your file has been uploaded");
            }
            else
            {
                Response.Write("You can upload only jpg and png files");
            }
        }
        else
        {
            Response.Write("Please select a file");
        }
        Session["ImageBytes"] = FileUpload1.FileBytes;
        ImagePreview.ImageUrl = "~/Handler.ashx";
        
    }
}
Posted 21-Sep-12 6:35am
Edited 21-Sep-12 6:42am
Wes Aday76.7K
v3

1 solution

Rate this: bad
good
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[^]
 
Thanks...
Comments
Tadit Dash at 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...
Regards,
Tadit
Tadit Dash at 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
0 CHill60 320
1 Sarvesh Kumar Gupta 238
2 Sergey Alexandrovich Kryukov 173
3 OriginalGriff 163
4 DamithSL 153


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