获取与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点击图像坐标

回答

相关问题