Javascript 在图像客户端上查找坐标

我有一个png

800x800

。单击图像上的某个位置（像素）后，假设

200x300

我想保存这些坐标

单击图像时，获取这些相对于图像的坐标的方法是什么

我不希望你只给我代码，参考也很好。

实际上，

html元素正是你需要的

<form action="/action_page.php" method="post">
  <input type="image" src="https://68.media.tumblr.com/avatar_c5ab8cc59f62_128.png" alt="Submit" width="128" height="128">
</form>

单击时，提交表单并在x和y变量（POST或GET，取决于表单的方法属性）中返回图像中的单击坐标

演示：

实际上，一个

html元素正好满足您的需要

<form action="/action_page.php" method="post">
  <input type="image" src="https://68.media.tumblr.com/avatar_c5ab8cc59f62_128.png" alt="Submit" width="128" height="128">
</form>

单击时，提交表单并在x和y变量（POST或GET，取决于表单的方法属性）中返回图像中的单击坐标

---

演示：

您必须从图像开始

<img id="something" src="some_image.png">

然后需要在事件处理程序中调用

fn

函数

document.getElementById('something').addEventListener('click', fn);

function fn(event) { ... }

在该事件处理程序中，现在可以从事件对象获取坐标

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;
}

clientX

和

clientY

将为您提供与正在单击的元素相关的坐标，在本例中为图像，其中左上角为

0，0

如果要保存，可以使用

localStorage

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;

     localStorage.setItem('coords', '{"x":"'+x+'", "y":"'+y+'"}');
}

当你想把它拿回来的时候

var coords = JSON.parse( localStorage.getItem('coords') )

---

你必须从一个图像开始

<img id="something" src="some_image.png">

然后需要在事件处理程序中调用

fn

函数

document.getElementById('something').addEventListener('click', fn);

function fn(event) { ... }

在该事件处理程序中，现在可以从事件对象获取坐标

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;
}

clientX

和

clientY

将为您提供与正在单击的元素相关的坐标，在本例中为图像，其中左上角为

0，0

如果要保存，可以使用

localStorage

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;

     localStorage.setItem('coords', '{"x":"'+x+'", "y":"'+y+'"}');
}

当你想把它拿回来的时候

var coords = JSON.parse( localStorage.getItem('coords') )

---

您只需使用鼠标单击事件：

function Coords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X : " + x + ", Y : " + y;
    document.getElementById("coords").innerHTML = coords;
}

演示：

---

：）

您只需使用鼠标单击事件：

function Coords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X : " + x + ", Y : " + y;
    document.getElementById("coords").innerHTML = coords;
}

演示：

---

：）

使用jQuery我们可以获得单击的位置。下面是相应的代码片段和演示

$（“#imageId”）。单击（函数（e）{
var parentOffset=$（this.parent（）.offset（）；
//或者$（this.offset（）；如果您确实只需要当前元素的偏移量
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
console.log（“X:+relX”）；
console.log（“Y:+relY”）；
});
使用jQuery我们可以获得单击的位置。下面是相应的代码片段和演示


$（“#imageId”）。单击（函数（e）{
var parentOffset=$（this.parent（）.offset（）；
//或者$（this.offset（）；如果您确实只需要当前元素的偏移量
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
console.log（“X:+relX”）；
console.log（“Y:+relY”）；
});

PHP将不是您可用的工具，PHP是服务器端。@chris85:那么您如何仅使用客户端编程语言保存数据？这是可能的，但可能不是0x45想要的。@KIKOSoftware问题不在于保存
单击图像时，如何获得这些相对于图像的坐标？
@chris85:是的，这是正确的。然而，问题还提到：
我想保存这些坐标。
，正如您可能已经读过的，不要惊慌（过去时！）。PHP将不是您可用的工具，PHP是服务器端。@chris85:那么，如何仅使用客户端编程语言保存数据？这是可能的，但可能不是0x45想要的。@KIKOSoftware问题不在于保存
单击图像时，如何获得这些相对于图像的坐标？
@chris85:是的，这是正确的。然而，问题还提到：
我想保存这些坐标。
，正如您可能已经读到的，不要惊慌也做了（过去时！）。我喜欢，非常简单。：-）一个缺点是“提交”部分，但你可以解决这个问题。好吧，太棒了。这是如此直截了当，即使像我这样的初学者也会明白的！谢谢，这正是我所需要的，因为我把它们保存为
$\u GET
或
$\u POST
！令人惊叹的很高兴能帮上忙，也很高兴我能给出答案。这是一个古老的、被遗忘的html特性，值得我们更好地了解：-）我喜欢它，非常简单。：-）一个缺点是“提交”部分，但你可以解决这个问题。好吧，太棒了。这是如此直截了当，即使像我这样的初学者也会明白的！谢谢，这正是我所需要的，因为我把它们保存为
$\u GET
或
$\u POST
！令人惊叹的很高兴能帮上忙，也很高兴我能给出答案。这是一个已经被遗忘的旧html特性，值得我们更好地了解：-）在您的
fn（event）
上，请不要手动构建JSON。请改用。谢谢您的快速回答！那么，我该如何将这些保存到一个php变量中呢？@0x45请做一些研究工作，如果有必要，再详细说明另一个问题。@DineiRockenbach-我很好，我甚至可以动态地将JSON字符串化！像那样创建JSON不是问题，除非你不知道自己在做什么，否则你应该坚持使用
JSON.stringify
@adeneo-Me，有时也会这样。但是我想，当我们为[通常]知识较少的人回答问题时，最好坚持使用针对一般用例的最佳方法。在您的
fn（event）
上，请不要手动构建JSON。请改用。谢谢您的快速回答！那么，我该如何将这些保存到一个php变量中呢？@0x45请做一些研究工作，如果有必要，再详细说明另一个问题。@DineiRockenbach-我很好，我甚至可以动态地将JSON字符串化！创建类似JSON的