相对于左上角获取图像像素坐标

Question

我需要在单击时获取相对于左上角的图像坐标。 因此，图像的左上角是条件0,0，然后第一个像素1,0 ... 2..0等。 在JavaScript中是否有可以使用的构造来获取此逻辑？

- John Travolta

Answer 1

您可以尝试类似以下的内容：-

  <img id="board" style="z-index: 0; left: 300;position: absolute; top: 600px" align=baseline     border=0 hspace=0 src="design/board.gif">

  function findPos(obj){
  var curleft = 0;
  var curtop = 0;

  if (obj.offsetParent) {
do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
   } while (obj = obj.offsetParent);

return {X:curleft,Y:curtop};
 }
}

 findPos(document.getElementById('board'));
 alert(curleft);
 alert(curtop);

- Rahul Tripathi

Answer 2

这里有一个链接可以帮助你：

http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/

该链接提供了使用JavaScript点击图像并获取坐标的方法。

- user1643087

---

好的，我将尽力完成您的要求。以下是需要翻译的内容：注意：答案在这里确实应该包含正确的答案，而不是指向它的链接，以防其他网站关闭。 - Wyatt Ward

Answer 3

offsetLeft 和 offsetTop 返回相对于文档左上角的位置：

function getCoordinates(elem) {
    var LeftPos = elem.offsetLeft;
    var TopPos = elem.offsetTop;
    return {X:LeftPos,Y:TopPos};
}

- LoonyNoob

Answer 4

使用 jQuery 的 $('#id').offset() 方法获取元素相对于窗口的位置，或使用 $('#id').position() 方法获取元素相对于父元素的 top、left 值。此外，查看这个问题，其中提供了纯 JavaScript 实现的答案。以下是 jsFiddle 中的示例。

HTML：

<div id="xRes">Top:<span></span></div>
<div id="yRes">Left:<span></span></div>

<input type="button" id="getPos" value="Get X,Y"/>

<img src="http://www.katimorton.com/wp-content/uploads/2012/05/mr-happy.jpg" id="myImg"/>

JS:

$(document).ready(function () {

    $('#myImg').draggable();

    $('#getPos').on('click', function(){

        var xRes = $('#xRes span'),
            yRes = $('#yRes span'),

            image = $('img#myImg');

        xRes.html(image.offset().top);
        yRes.html(image.offset().left);
    });
});

- Davor Zubak