在asp.net中显示裁剪的图像 [英] displaying a cropped image in asp.net
本文介绍了在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
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中显示裁剪的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
