C# 这是否可以使用asp.net web应用程序对图像进行一些注释（如编辑）工作？
我在asp.net网页上有一个图像编辑工作。实际上，工作是我必须选择图像的区域，然后在图像的选定部分绘制一些图形对象，如黑色矩形框，以隐藏图像的选定部分（与编辑工作类似）。最后必须将编辑工作保存回原始图像 我已经在我的网页上加载了图像，并且允许用户使用javascript函数在图像上绘制一些矩形框 我还编写了将图像保存回服务器的代码…但它不起作用 我认为控件从未越过这条线（这条线上可能有错误） 为了便于检查，我在上面一行后面放了一条警告语句…但它没有打印出来。。。什么都没发生 用于在图像上绘制矩形框的Java脚本代码：C# 这是否可以使用asp.net web应用程序对图像进行一些注释（如编辑）工作？,c#,asp.net,image,image-processing,image-manipulation,C#,Asp.net,Image,Image Processing,Image Manipulation,我在asp.net网页上有一个图像编辑工作。实际上，工作是我必须选择图像的区域，然后在图像的选定部分绘制一些图形对象，如黑色矩形框，以隐藏图像的选定部分（与编辑工作类似）。最后必须将编辑工作保存回原始图像 我已经在我的网页上加载了图像，并且允许用户使用javascript函数在图像上绘制一些矩形框 我还编写了将图像保存回服务器的代码…但它不起作用 我认为控件从未越过这条线（这条线上可能有错误） 为了便于检查，我在上面一行后面放了一条警告语句…但它没有打印出来。。。什么都没发生 用于在图像上绘制矩
<head>
<style type="text/css">
#rubberBand
{
position: absolute;
visibility: hidden;
width:0px;
height:0px;
border: 2px;border-color:Red;
background-color:black;
}
</style>
</head>
<body>
<div id="rubberBand"></div>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>
<script type="text/javascript">
var IMG;
function startRubber(evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber(evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup
}
function stopRubber(evt) {
IMG.onmousemove = null;
}
function cancelDragDrop() {
window.event.returnValue = false;
}
IMG = document.getElementById('Image2');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
</script>
</body>
你似乎在寻找现成的解决方案，我不觉得奇怪，你没有找到 你需要把你的问题分解成你自己可以解决或者别人已经解决的小步骤。简言之：
您现在必须指出您在上述几点中遇到了哪些问题。您似乎已经找到了一个现成的解决方案，我认为您没有找到这个解决方案并不奇怪 你需要把你的问题分解成你自己可以解决或者别人已经解决的小步骤。简言之：
您现在必须指出您在上述几点中遇到的问题。非常感谢您的指导。。。我对你的第二步和第三步有意见…@Saravanan，那么看看你走了多远会有帮助。我希望你不要指望我为你写代码。更新您的问题并展示您的答案。非常抱歉，CodeCaster:我对web应用程序和asp.net不熟悉，我刚刚在我的asp.net web应用程序中加载了一个图像，需要用户在我加载的图像上绘制一个矩形框…@你能告诉我这是否可以通过javascript实现吗？@Saravanan根据你的问题历史记录，你对任何事物都是新手。；-）你说“[我]需要让用户在图像上画一个矩形框”——这必须用JavaScript完成，我指出了这一点。在网上搜索“javascript在图像上绘制矩形”，你会得到很多结果。如果您的问题是不知道如何将其发送到服务器，请搜索“JavaScriptPostVariablestoASP.NET”（使用MVC将变得更容易一些，请参阅WebAPI）。如果您不知道如何在服务器端绘制图像，请搜索该图像。等等解释你遇到的每一点困难。非常感谢你的指导。。。我对你的第二步和第三步有意见…@Saravanan，那么看看你走了多远会有帮助。我希望你不要指望我为你写代码。更新您的问题并展示您的答案。非常抱歉，CodeCaster:我对web应用程序和asp.net不熟悉，我刚刚在我的asp.net web应用程序中加载了一个图像，需要用户在我加载的图像上绘制一个矩形框…@你能告诉我这是否可以通过javascript实现吗？@Saravanan根据你的问题历史记录，你对任何事物都是新手。；-）你说“[我]需要让用户在图像上画一个矩形框”——这必须用JavaScript完成，我指出了这一点。在网上搜索“javascript在图像上绘制矩形”，你会得到很多结果。如果您的问题是不知道如何将其发送到服务器，请搜索“JavaScriptPostVariablestoASP.NET”（使用MVC将变得更容易一些，请参阅WebAPI）。如果您不知道如何在服务器端绘制图像，请搜索该图像。等等解释你遇到的每一点问题。
<head>
<style type="text/css">
#rubberBand
{
position: absolute;
visibility: hidden;
width:0px;
height:0px;
border: 2px;border-color:Red;
background-color:black;
}
</style>
</head>
<body>
<div id="rubberBand"></div>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>
<script type="text/javascript">
var IMG;
function startRubber(evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber(evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup
}
function stopRubber(evt) {
IMG.onmousemove = null;
}
function cancelDragDrop() {
window.event.returnValue = false;
}
IMG = document.getElementById('Image2');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
</script>
</body>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
// Send the canvas image to the server.
$(function () {
$("#btnSend").click(function () {
var image = document.getElementById("Image2").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Default.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image sent!');
}
});
});
});
</script>
</head>
<body>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>
<input id="btnSend" type="button" value="Send To Server" />
</body>
[WebMethod()]
public static void UploadImage(string imageData)
{
FileStream fs = new FileStream("D:\\vs-2010projects\\js_save\\js_save\\myimages\\image.png", FileMode.Create);
BinaryWriter bw = new BinaryWriter(fs);
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}