javascript - 使用Jquery获取点击图像的坐标

Question

我有一个调整大小的图像(width="100")和一个 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>

问题是我想获取原始图像的实际坐标，而不是调整后的图像。

您有什么建议吗？谢谢。

Answer 1

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(' ');
}).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>