Question

我有一个png 800x800。点击图片上的某个位置（像素）后，让我们说200x300我要保存这些坐标。

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

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

Answer 1

实际上，<input type="image"> 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 ＆amp;的点击坐标。 y 变量（POST或GET，具体取决于表单的方法属性）。

演示：https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_height_width

Answer 2

你必须从图像开始

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

然后你需要一个事件处理程序

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

然后你需要在事件处理程序中调用的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') )

Answer 3

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

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

样本：http://jsbin.com/hucoliyane/1/edit?html,js,output

：）

Answer 4

使用jQuery我们可以获得点击的位置。相应的代码段在下面附带演示。

＆＃13;

if (dataGridView1.Rows.Cast<DataGridViewRow>()
     .Any(c => string.IsNullOrWhiteSpace(c.Cells[0].Value?.ToString())))

＆＃13;

$("#imageId").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   console.log("X : "+relX);
   console.log("Y : "+relY);

});

＆＃13;

在客户端图像上查找坐标

4 个答案: