jQuery получить относительные координаты кликов на изображении в его реальных размерах

Question

У меня есть изображение в моей модели DOM, и я хочу получить координаты щелчка мыши относительно изображения в его естественной ширине и высоте, а не той, которая соответствует контейнеру. Например, когда мышь щелкает изображение, оно возвращает координаты (50, 50), которые являются фактическими координатами щелчка на изображении в его фактических размерах.

Есть идеи, как этого добиться?

Answer 1

Я сделал для вас простой и легкий скрипт!

const getCoords = (e) => {

  e = (e||window.event);
  
  let absoluteCoords = {
    x: e.pageX - e.target.getBoundingClientRect().left,
    y: e.pageY - e.target.getBoundingClientRect().top
  }
  
  return {
    x: absoluteCoords.x / e.target.clientWidth * e.target.naturalWidth,
    y: absoluteCoords.y / e.target.clientHeight * e.target.naturalHeight
  };

}

Answer 2

После некоторых набросков вот как я это решил.

    $("#img-container img").click((e) => {
    // image reference
    const img = $("#img-container img");

    // consider scrolled page amount for later calcualtions
    const scrollTop = $("body").scrollTop();
    const scrollLeft = $("body").scrollLeft();

    // calculate click x, y coords 
    let x = e.pageX + scrollLeft - e.target.offsetLeft;
    let y = e.pageY + scrollTop - e.target.offsetTop;

    // get original image dimensions
    const originalWidth = e.target.naturalWidth;
    const originalHeight = e.target.naturalHeight;

    // calcualte the difference in dimensions with current image
    const deltaWidth = originalWidth / img.width();
    const deltaHeight = originalHeight / img.height();

    // multiply the difference with x,y coords
    x = Math.round(x * deltaWidth);
    y = Math.round(y * deltaHeight);

    console.log(x, y);

  });

спасибо за помощь