獲取與jquery點擊圖像座標

我有一個調整大小的圖像（寬度=「100」）和一個jQuery腳本來輸出當前的座標，當我點擊該圖像。獲取與jquery點擊圖像座標

<img id="image" src="http://localhost/image.jpg" width="100" > 

<script> 
    $('#image').mousemove(function(event) { 
    window.current_x = Math.round(event.pageX - $('#image').offset().left) ; 
    window.current_y = Math.round(event.pageY - $('#image').offset().top); 
    window.current_coords = window.current_x + ', ' + window.current_y; 
    $('#edit_instants_now').html('Current position: ' + window.current_coords + '.'); 
    }).mouseleave(function() { 
    $('#edit_instants_now').html('&nbsp;'); 
    }).click(function() { 
    $('#edit_instants_click').html('Last click: ' + window.current_coords + '. '); 
    document.edit_instant.edit_instant_x.value = window.current_x; 
    document.edit_instant.edit_instant_y.value = window.current_y; 
    }); 
</script>

問題是我想獲取原始圖像的實際座標而不是調整大小。

你有什麼建議嗎？謝謝。

來源

2015-09-02 redviper2100

你知道原來的大小？如果是這樣，你可以插入。 –

如果你沒有辦法得到它：http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript –

大小並不總是相同。它有各種尺寸。 – redviper2100

var naturalWidth = 100; 
 
$('#image').mousemove(function(event) { 
 
    var img = $('#image'); 
 
    console.log(naturalWidth); 
 
    ratio = naturalWidth/img.width(); 
 
    window.current_x = (event.pageX - img.offset().left) * ratio; 
 
    window.current_y = (event.pageY - img.offset().top) * ratio; 
 
    window.current_coords = window.current_x + ', ' + window.current_y; 
 
    $('#edit_instants_now').html('Current position: ' + window.current_coords + '.'); 
 
}).mouseleave(function() { 
 
    $('#edit_instants_now').html('&nbsp;'); 
 
}).click(function() { 
 
    $('#edit_instants_click').html('Last click: ' + window.current_coords + '. '); 
 
    document.edit_instant.edit_instant_x.value = window.current_x; 
 
    document.edit_instant.edit_instant_y.value = window.current_y; 
 
}); 
 

 
$('img').on('load', function(e) { 
 
    naturalWidth = e.target.naturalWidth; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<img id="image" src="http://dummyimage.com/600x400/000/fff" width="100"> 
 

 
<form name="edit_instant"> 
 
    <div id="edit_instants_now"></div> 
 
    <div id="edit_instants_click"></div> 
 
    <input name="edit_instant_x"> 
 
    <input name="edit_instant_y"> 
 
</form>

來源

2015-09-02 18:52:05 RRK

謝謝！那樣做了！ – redviper2100

獲取原始圖像的大小，將其除以調整大小的圖像的大小 - 這會給你一個scale factor，然後乘以比例因子單擊調整大小的圖像的結果x，y座標。

希望這會有所幫助。

來源

2015-09-02 18:40:41

獲取與jquery點擊圖像座標

回答

相關問題