How to get pixel number from image by click?

Question

I have an image 16000x9000 that is displayed on a simple page with predefined size for its container.

 myimage.onclick = function(e) {
        console.log(e.x, e.y);
    };

    <p>Image to use:</p>
    <img id="myimage" width="900px" height="500px" src="https://via.placeholder.com/150C/O https://placeholder.com/">

I want to click by image and get pixels coordinate. When I click by image I receive 900x500 as output of console.log and it's obvious incorrect data and means something else.

I expect to get the value approximate to original image width/height when I click on the bottom right corner.

How can I get this data?

Possible duplicate of [Find mouse position relative to element](https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element) — Mike Doe, Jun 04 '19 at 21:12
You need to subtract offsets from your result, this might help - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect — DannyMoshe, Jun 04 '19 at 21:15
It doesn’t matter if it’s an image or a canvas or a div. The solution is there. Also fix your html, `900px` is not a valid value for the width attribute. — Mike Doe, Jun 04 '19 at 21:19

abney317 · Accepted Answer · 2022-11-10T22:10:17.550

1

You can do some math to compare the size of the element and the original image size.

myimage.onclick = function(e) {
  var ratioX = e.target.naturalWidth / e.target.offsetWidth;
  var ratioY = e.target.naturalHeight / e.target.offsetHeight;

  var domX = e.x + window.pageXOffset - e.target.offsetLeft;
  var domY = e.y + window.pageYOffset - e.target.offsetTop;

  var imgX = Math.floor(domX * ratioX);
  var imgY = Math.floor(domY * ratioY);

  console.log(imgX, imgY);
};

<p>Image to use:</p>
<img id="myimage" width="900px" height="500px" src="https://via.placeholder.com/80x40">

edited Nov 10 '22 at 22:10

answered Jun 04 '19 at 21:24

abney317

7,760
6
32
56

you are amazing! that's exactly what I need! – boden Jun 04 '19 at 21:27
I am getting `51 -3` when I click over on the right side of the image – Get Off My Lawn Jun 04 '19 at 21:44
@GetOffMyLawn Yes, this won't work if you scroll the page. You'd have to view in full screen. – abney317 Jun 04 '19 at 21:45
You should take the x/y scroll offset into account – Get Off My Lawn Jun 04 '19 at 21:45
1

The calculation should use floor rather than round -- otherwise the index will go off the data values at the edges. Also for the other answer below. – Aaron Watters Nov 10 '22 at 18:57

score 0 · Answer 2 · answered May 27 '22 at 14:05

It's a bit easier if you use offsetX and offsetY:

var ratioX = e.target.naturalWidth / e.target.offsetWidth;
var ratioY = e.target.naturalHeight / e.target.offsetHeight;
var imgX = Math.round(e.offsetX * ratioX);
var imgY = Math.round(e.offsetY * ratioY);

How to get pixel number from image by click?

2 Answers2