displaying a cropped image in asp.net

Question

3.00/5 (2 votes)

See more:

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

ASP.NET

<%@ 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

C#

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

Raghavanand

Updated 21-Sep-12 6:42am

Wes Aday

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2012-09-21T10:11:00

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...

Posted 21-Sep-12 10:11am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

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...
Regards,
Tadit

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 25-Sep-12 2:04am

Thanks for accpeting...