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

时间:2012-11-27 15:11:45

标签: javascript

我需要在点击相对左上角获取图像坐标。所以图像的左上角是条件0,0然后是第一个像素1,0 ... 2..0等。在javascript构造中有什么东西可以用来获得这个逻辑吗?

4 个答案:

答案 0 :(得分:6)

答案 1 :(得分:5)

您可以尝试这样的事情: -

  <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);

答案 2 :(得分:2)

使用Jquery $('#id').offset()获取相对于窗口的元素位置,或使用$('#id').position()获取元素top,left相对于父元素。另请查看此question,在纯(vanilla)javascript中提供答案。这是jsFiddle example

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);
    });
});

答案 3 :(得分:2)

offsetLeft和offsetTop返回相对于文档顶部/左角的位置:

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