在divControl中我使用img src来获取该图像，但在运行时我需要最终用户选择的图像代码 [英] In divControl i wriiten the img src so its getting that image ,but there i needed the end user selected image code at runtime
本文介绍了在divControl中我使用img src来获取该图像，但在运行时我需要最终用户选择的图像代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<％@ Page 语言 = C＃ AutoEventWireup = true CodeBehind = UploadCrop.aspx.cs 继承 = ImageEx.UploadCrop ％>
< ！DOCTYPE html >
< html xmlns = http://www.w3.org/1999/xhtml >
< head runat = server >
< title > < / title >
< <跨越ss =code-leadattribute> link href = css / imgareaselect-default.css rel = stylesheet / >
< script src = scripts / jquery.min.js > < / script >
< script src = scripts / jquery.imgareaselect.pack.js > < / script >
< script >
$（document）.ready（function（）{
$（ ＃btnCrop）。click（function（）{
$（ ＃imgCrop）。imgAreaSelect（{
aspectRatio： 4：3，句柄： true ，onSelectEnd：function（img，selection）
{
$（ ' X1'）。val（selection.X1）;
$（' Y1'）。val（selection.Y1）;
$（' X2'）。val（selection.X2）;
$（' Y2'）。val（selection.Y2）;
}
}）;
}）
}）;
函数预览（img，选择）{
var scaleX = 100 /（ selection.width || 1 ）;
var scaleY = 100 /（selection.height || 1 ）;
$（' ＃imgCrop + div> img'）。css （{
宽度：Math.round（scaleX * 400 ）+ ' px'，
height：Math.round（scaleY * 300 ）+ ' px'，
marginLeft：' - ' + Math.round（scaleX * selection.x1）+ ' px' ，
marginTop：' - ' + Math.round（scaleY * selection） .y1）+ ' px'
}）;
}
$（文件）.ready（function（）{
$（' < div>< img src =116.jpgstyle =position：relative/>< / div>'）
.css （{
float ：' bottom'，
position：' relative'，
溢出：' hidden'，
width：' 100px'，
height：' 100px '
}）
.insertAfter（$（' ＃imgCrop'））;
$（' ＃imgCrop'）。imgAreaSelect（{aspectRatio：< span class =code-string>' 1：1'，onSelectChange：preview}）
}）;
< / script >
< style type = text / css >
＃ btnCrop {
宽度 ： 107px;
}
＃ SubmitCropped {
width ： 92px;
}
< / style >
< / head >
< body >
< 表格 id = form1 runat = 服务器 >
< div >
< asp：Panel ID = pnlUpload runat = server >
< asp：FileUpload ID = 上传 runat = server / >
< br / >
< br / >
< asp：按钮 ID = btnUpload runat = server < span class =code-attribute> OnClick = btnUpload_Click 文字 = 上传 宽度 = 101px / >
< br / >
< asp：Label ID = LblError runat = server Text = 标签 可见 = False > < / asp：Label >
< / asp：Panel >
< asp：Panel ID = pnlCrop runat = server 可见 = false 高度 = 447px >
< asp：图像 ID = imgCrop runat = server < span class =code-attribute>高度 = 250px 宽度 = 300px / >
& nbsp;
< br / >
< 输入 id = btnCrop type = 按钮 value < span class =code-keyword> = 裁剪 / >
< 输入 id = SubmitCropped < span class =code-attribute> type = submit value = 提交 / >
< br / > t; br />
< br < span class =code-keyword> / >
< br / >
< br / >
< / asp：Panel >
< / div >
< / form >
< / body >
< / html < span class =code-keyword>>
代码隐藏文件：
使用系统;
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web;
使用 System.Web.UI;
使用 System.Web.UI.WebControls;
使用 System.IO;
使用 System.Drawing;
使用 System.Drawing.Imaging;
使用 System.Drawing.Drawing2D;
命名空间 ImageEx
{
}
}
解决方案
（document）.ready（function（）{
（ ＃btnCrop）。click（function（）{
< blockquote>（ ＃imgCrop）。imgAreaSelect（{
aspectRatio： 4：3，句柄： true ，onSelectEnd： function（img，selection）
{
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadCrop.aspx.cs" Inherits="ImageEx.UploadCrop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/imgareaselect-default.css" rel="stylesheet"/>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.imgareaselect.pack.js"></script>
<script>
$(document).ready(function () {
$("#btnCrop").click(function () {
$("#imgCrop").imgAreaSelect({
aspectRatio: "4:3", handles: true, onSelectEnd: function (img, selection)
{
$('X1').val(selection.X1);
$('Y1').val(selection.Y1);
$('X2').val(selection.X2);
$('Y2').val(selection.Y2);
}
});
})
});
function preview(img, selection) {
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#imgCrop + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
$(document).ready(function () {
$('<div><img src="116.jpg" style="position:relative" /></div>')
.css({
float: 'bottom',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#imgCrop'));
$('#imgCrop').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview })
});
</script>
<style type="text/css">
#btnCrop {
width: 107px;
}
#SubmitCropped {
width: 92px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" Width="101px" />
<br />
<asp:Label ID="LblError" runat="server" Text="Label" Visible="False"></asp:Label>
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false" Height="447px">
<asp:Image ID="imgCrop" runat="server" Height="250px" Width="300px" />
<br />
<input id="btnCrop" type="button" value="Crop" />
<input id="SubmitCropped" type="submit" value="submit" />
<br />t;br />
<br />
<br />
<br />
</asp:Panel>
</div>
</form>
</body>
</html>
At codebehind file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
namespace ImageEx
{
}
} 解决方案
(document).ready(function () {
("#btnCrop").click(function () {
("#imgCrop").imgAreaSelect({ aspectRatio: "4:3", handles: true, onSelectEnd: function (img, selection) {
这篇关于在divControl中我使用img src来获取该图像，但在运行时我需要最终用户选择的图像代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
