Programming

How to get the intrinsic coordinates on an image mouse click

I’m currently working on a program that can generate a customizable image report. It needs to allow the user to click on areas in an image to specify certain areas used when generating the report.

One method of doing this would be to use a two dimensional drawing library, like Two.js. Unfortunately, these libraries require a lot of overhead when all that’s needed is for a user to specify a position on an image.

Luckily, there is a jQuery solution. And with a bit of extra work, it’s doable in pure JavaScript as well. It doesn’t require any libraries beyond jQuery.

I found this solution on StackOverflow with a quick Google search. Unfortunately, it will only give the location of the pixel on the HTML image element. This means that an image served at 1280×720, but displayed at half that size (640×360) would make a click on the bottom left corner of the image return an X/Y of 630 and 360, not the actual image pixel location, 1280 / 720.

My solution was to simply get the percentage location of the x any y axis click location off of the actual image width and height. This means that clicking the center would give me a percentage value of 0.5, instead of 315. Then, I multiply that percentage by the actual image width.

[codepen_embed height=”468″ theme_id=”default” slug_hash=”MWYvQxX” default_tab=”result” user=”scarabcoder”]See the Pen Get Clicked Location by Nicholas (@scarabcoder) on CodePen.[/codepen_embed]

$(document).ready(() => {
  $("#test-image")
    .unbind("click")
    .on("click", function(event) {
      let x = event.pageX - this.offsetLeft;
      let y = event.pageY - this.offsetTop;
      let xPercent = x / this.width;
      let yPercent = y / this.height;
      let actualX = xPercent * this.naturalWidth;
      let actualY = yPercent * this.naturalHeight;
      alert("X Coordinate: " + actualX + " Y Coordinate: " + actualY);
    });
});

The image in the codepen is 1280×720, but the img HTML tag resizes the image to half that size.

Published by
Nicholas Harris

Recent Posts

Higher-Order React Hooks

As part of the next step in learning React, I've been moving the business logic…

1 year ago

Finding and Fixing Layout Shifts/CLS Issues

Over the past few months, I've been working on fixing Cumulative Layout Shift issues for…

2 years ago

web-vitals vs Lighthouse vs PageSpeed Insights – What’s the Difference?

There are quite a few different libraries out there that can help with measuring your…

2 years ago

Google Search Console Showing High CLS But PageSpeed Insights Shows Good Score

So you've asked a plugin provider/your theme designer/ads provider to fix CLS issues that you…

2 years ago

Using AMP Pages to Boost your Mobile Performance

Site Speed Having a slow site can be a real headache, and unlike many issues…

3 years ago

Score Doesn’t Matter – How to Sanity-Check Your GTMetrix Report

I commonly see people running a site speed test through GTMetrix or Google PageSpeed Insights…

3 years ago