我刚刚开始使用 jquery umgareaselect,我认为这正是我所需要的,但是我上传的图像有问题。上传脚本工作正常,图像已成功保存到服务器上名为“upload”的文件夹中。我使用几个 asp 变量来存储刚刚上传的文件的位置。 如果我直接在“src”标签中直接引用图像的 url,则最初选择的区域工作正常,但是如果我使用 ASP 中的变量(如下面的代码),则图像将正确加载并显示,但最初选择的区域无法移动或选择。我希望下面的代码有帮助:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<body>
<%image_name = request.form("image_name")%>
<%mainurl = request.form("mainurl")%>
<form action="aspimage_DEMO3.asp" method="post" target="_blank" id="form">
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input type="submit" name="submit" value="Submit" />
<link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/scripts/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({ x1: 10, y1: 10, x2: 40, y2: 40 });
});
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
});
</script>
</head>
<body>
<%
%>
<img src=<%response.write(mainurl)%><%response.write(image_name)%> id="ladybug_ant" style="height:200px;width:300px;"><br>
</body>
</html>
所以“mainurl”变量就是“http://www.website.co.uk” ','image-name' 变量是 '/uploads/imagename.jpg'。 img src 标签在显示图像方面工作正常,但最初选择的区域无法移动到任何地方,并且当我按下提交时,坐标将进行裁剪并且不会显示。我知道这是很容易实现的事情,但我似乎无法解决它,如果能提供一点帮助,我们将不胜感激。
非常感谢 凯夫
最佳答案
我不确定,如果我正确理解你的问题..如果你试图根据输入坐标值创建选择区域..就在这里
var edit_box = $('#ID').imgAreaSelect({ instance: true });
//give the coordinates here
edit_box.setSelection(x1,y1,x2,y2, true);
edit_box.setOptions({ show: true });
edit_box.update();
这将在图像上您想要的位置设置选择框。希望它有帮助
关于javascript - jQuery imgAreaSelect - 从表单传递的图像和区域选择问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21831337/