獲取圖像像素座標相對左上角

Question

我需要得到的圖像上單擊相對左上角座標。所以左上角的圖像是有條件的0,0，然後第一個像素1,0 ... 2..0等。有什麼在JavaScript的建設我可以用來得到這個邏輯？

Answer 1

這裏是一個鏈接，可以幫助你

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

Answer 2

使用jquery $('#id').offset()來獲取相對於窗口的元素位置，或使用$('#id').position()來獲取元素頂部，相對於父元素左側。也看看這個question，提供在純（香草）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); 
    }); 
}); 

Answer 3

你可以嘗試這樣的事情： -

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

Answer 4

offsetLeft的offsetTop和返回相對於文檔的頂部/左上角的位置：

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