捕获客户端图像坐标 [英] Capturing client-side image coordinates
问题描述
我正在使用我的浏览器（Mozilla / 5.0 Linux i686 Gecko / 20031007 Firebird / 0.7）
来做一些客户端图像处理。我想在下面的html中捕获用户在xxx.jpg中点击的
坐标的序列
< a href ="＃" >< IMG SRC =" xxx.jpg" ISMAP>< / a>
并将这些保存到文件中以便以后处理。当我移动鼠标时，坐标显示在窗口左下角的
上，所以我知道他们是以某种方式传递给b $ b，但我还没有想出了如何''抓住''/ b
。 （我很抱歉，如果这是一个经常的Q.但网络搜索导致
答案）。非常感谢。
--Tony
I''m using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
to do some client-side image processing. I want to capture the sequence of
coordinates a user clicks on in xxx.jpg in the following html
<a href="#"><IMG SRC="xxx.jpg" ISMAP></a>
and save these to a file for later handling. The coordinates appear on
the bottom left of the window as I move the mouse, so I know they''re
being passed around somehow, but I haven''t figured out how to ''catch''
them. (My apologies if this is a frequent Q. but a web search has led
to an answer). Help much appreciated.
--Tony
推荐答案
Tony Gahlinger写道：
Tony Gahlinger wrote:
我正在使用我的浏览器（Mozilla / 5.0 Linux i686 Gecko / 20031007 Firebird / 0.7）来进行客户端图像处理。我想在以下html中捕获用户在xxx.jpg中点击的
坐标序列
< a href ="＃">< IMG SRC =" ; XXX.JPG" ISMAP>< / a>
并将这些文件保存到文件中以便以后处理。当我移动鼠标时，坐标出现在窗口左下角，所以我知道他们已经以某种方式被传递，但我还没弄明白如何抓住 '
他们。 （我很抱歉，如果这是一个经常的Q.但网络搜索已经导致了答案）。非常感谢。
I''m using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
to do some client-side image processing. I want to capture the sequence of
coordinates a user clicks on in xxx.jpg in the following html
<a href="#"><IMG SRC="xxx.jpg" ISMAP></a>
and save these to a file for later handling. The coordinates appear on
the bottom left of the window as I move the mouse, so I know they''re
being passed around somehow, but I haven''t figured out how to ''catch''
them. (My apologies if this is a frequent Q. but a web search has led
to an answer). Help much appreciated.
^^没有^^
哎呀！ （如果它导致答案是空的！）。
关于如何捕获/存储点击坐标的任何建议？谢谢。
--Tony
^^no^^
Oops! (If it led to an answer it was a null one!).
Any suggestions on how to capture/store clicked coordinates? Thanks.
--Tony
Tony Gahlinger写道：
Tony Gahlinger wrote:
Tony Gahlinger写道：
Tony Gahlinger wrote:
我正在使用我的浏览器（Mozilla / 5.0 Linux i686 Gecko / 20031007 Firebird / 0.7）来进行客户端图像处理。我想在下面的html中捕获用户在xxx.jpg中点击的坐标序列
I''m using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7)
to do some client-side image processing. I want to capture the
sequence of coordinates a user clicks on in xxx.jpg in the following html
它使用了一些鼠标跟踪代码我来自一个网站，它在这里使用
作为一个例子，我建议寻找更好的鼠标跟踪
方法，也许有人在这里会发布一个方法，不依赖于
浏览器检测。这适用于我的IE6，Netscape 7.1，Firefox 0.8但是我不知道其他浏览器会做什么，尤其是。 Opera。
我在这里做的是：跟踪鼠标位置，点击图像时
将当前鼠标坐标发送到减去<的函数br />
页面上的图像位置（左，上）获取图像（x，y）位置
鼠标，将这些数字存储在数组中。
我不知道如何将数组内容保存到文件中，抱歉。
< script type =" text / javascript">
// TRACK MOUSE BEGIN
//检测浏览器是否为IE浏览器。
//如果不是IE，我们假设浏览器是NS 。
var IE = document.all？true：false
//如果NS - 即！IE - 然后设置为鼠标捕获
if（！IE）document.captureEvents（Event.MOUSEMOVE）
//设置使用getMouseXY函数onMouseMove
document.onmousemove = getMouseXY;
//用于保存鼠标的临时变量xy pos.s
var tempX = 0
v ar tempY = 0
//检索鼠标xy pos.s的主要功能
函数getMouseXY（e）{
if（IE）{//抓住xy pos.s如果浏览器是IE
tempX = event.clientX + document.body.scrollLeft
tempY = event .clientY + document.body.scrollTop
} else {//抓住xy pos.s如果浏览器是NS
tempX = e.pageX
tempY = e.pageY
}
//在NS4中捕获可能的负值
if（tempX< 0）{tempX = 0}
if（tempY< 0）{tempY = 0}
//以名为Show
的形式显示位置值
//在名为MouseX和MouseY的文本字段中
//document.Show.MouseX.value = tempX
//document.Show.MouseY.value = tempY
返回true
}
//跟踪鼠标结束
//数组到存储鼠标coord''s
var coords = new Array（）;
//将规范化后的鼠标坐标存储在img top中，离开
函数storepoint（x，y，target）{
// alert（x +''，''+ y +''\ nTop'' + target.offsetTop +''Left''+ target.offsetLeft）;
alert（（x-target.offsetLeft）+''，''+（y-target.offsetTop））;
//alert(target.offsetTop）;
//alert(document.getElementById(''img1'').left);
coords [coords.length] = [x-target.offsetLeft，y-target.offsetTop];
}
函数showarr（）{
var s1 ='''';
for（var i = 0; i< coords.length; i ++）
s1 + =''\ n''+ coords [i] [0] +''，''+ coords [i] [1];
alert（s1）;
}
< img name =" img1" ID = QUOT; IMG1" SRC =" iamges / logo.gif" width =" 543"
height =" 113" onmousedown =" storepoint（tempX，tempY，this）">
< / p>
< p>
< ; input type =" button" value ="显示数组内容（点击坐标）"
onclick =" showarr（）">
祝你好运，
Mike
This uses some mouse tracking code I got from a website, it is used here
as an example, I would recommend looking for a better mouse-tracking
approach, maybe someone here will post a method that doesn''t rely upon
browser detection. This works in my IE6, Netscape 7.1, Firefox 0.8 but I
have no idea what other browsers will do, esp. Opera.
What I did here was: track the mouse position, when the image is clicked
send the current mouse coordinates to a function that subtracts the
image position on the page (left, top) to get the image (x, y) position
of the mouse, store those numbers in an array.
I have no idea how to save the array contents to a file, sorry.
<script type="text/javascript">
//TRACK MOUSE BEGIN
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX
//document.Show.MouseY.value = tempY
return true
}
//TRACK MOUSE END
//array to store mouse coord''s
var coords=new Array();
//store mouse coord''s in array after normalizing to img top, left
function storepoint(x,y, target){
//alert(x+'', ''+y+''\nTop ''+target.offsetTop+'' Left ''+target.offsetLeft);
alert((x-target.offsetLeft)+'', ''+(y-target.offsetTop));
//alert(target.offsetTop);
//alert(document.getElementById(''img1'').left);
coords[coords.length]=[x-target.offsetLeft,y-target.offsetTop];
}
function showarr(){
var s1='''';
for (var i=0; i<coords.length; i++)
s1+=''\n''+coords[i][0]+'', ''+coords[i][1];
alert(s1);
}
<img name="img1" id="img1" src="iamges/logo.gif" width="543"
height="113" onmousedown="storepoint(tempX, tempY, this)">
</p>
<p>
<input type="button" value="Show Contents of Array (click coordinates)"
onclick="showarr()">
Good Luck,
Mike
mscir写道：
Tony Gahlinger写道：
Tony Gahlinger wrote:
Tony Gahlinger写道：
Tony Gahlinger wrote:
我正在使用我的浏览器（Mozilla / 5.0 Linux i686 Gecko / 20031007
Firebird / 0.7）
做一些客户端图像处理。我想在下面的xxx.jpg中捕获用户点击的坐标序列
html
I''m using my browser (Mozilla/5.0 Linux i686 Gecko/20031007
Firebird/0.7)
to do some client-side image processing. I want to capture the
sequence of coordinates a user clicks on in xxx.jpg in the following
html
这使用了一些鼠标跟踪代码我来自一个网站，它在这里使用
作为一个例子，我建议寻找一种更好的鼠标跟踪方法，也许有人在这里发布一个不依赖的方法
我在这里做的是：跟踪鼠标位置，点击图像时
将当前鼠标坐标发送到减去页面上
图像位置的功能（左，上）获取鼠标的图像（x，y）位置，将这些数字存储在一个数组中。
...
好运，
Mike
This uses some mouse tracking code I got from a website, it is used here
as an example, I would recommend looking for a better mouse-tracking
approach, maybe someone here will post a method that doesn''t rely upon
browser detection. This works in my IE6, Netscape 7.1, Firefox 0.8 but I
have no idea what other browsers will do, esp. Opera.
What I did here was: track the mouse position, when the image is clicked
send the current mouse coordinates to a function that subtracts the
image position on the page (left, top) to get the image (x, y) position
of the mouse, store those numbers in an array.
...
Good Luck,
Mike
谢谢迈克。这就是我要找的部分。
- 托尼
Thanks Mike. That''s the part I was looking for.
--Tony
这篇关于捕获客户端图像坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
