在asp.net中显示裁剪的图像

问题描述：

我正在执行需要裁剪图像并自行显示图像的任务.我已经成功完成了裁剪部分，但无法在野外设置裁剪后的图像.

代码在这里

aspx

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";
        
    }
}

答

.extend(

.imgAreaSelect，{ 动画:函数(fx){ var 开始= fx.elem.start，结束= fx.elem.end，现在= fx.now， curX1 = 数学 .round(现在为start.x1 +(end.x1-start.x1)*)， curY1 = 数学 .round(现在为start.y1 +(end.y1-start.y1)*)， curX2 = 数学 .round(现在为start.x2 +(end.x2-start.x2)*)， curY2 = 数学 .round(现在为start.y2 +(end.y2-start.y2)*)； fx.elem.ias.setSelection(curX1，curY1，curX2，curY2); fx.elem.ias.update(); }，原型:

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

在asp.net中显示裁剪的图像

相关推荐