Member Avatar for subhankar02dey

Hello,

I have done how to find out co ordinate(x and y axis) of a point on an image where a user clicks.
But I need the opposite thing now.
I need to mark a point on an image when a user gives suitable x axis and y axis co ordinate as input, how can i do this with java script?
Pls help

  • 2 Contributors
  • 2 Replies
  • 269 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by subhankar02dey

Dani AI

Generated

A short, practical follow-up to ’s toy example for real pages and responsive images. There are two reliable approaches: place a small absolutely positioned DOM element on top of the image, or draw the marker into an HTML5 canvas that overlays the image. The key is converting the supplied coordinates (percent, natural-image pixels, or displayed pixels) into the image’s current displayed pixels using the image’s natural size and getBoundingClientRect().

Here is a minimal DOM-overlay example (wait for the image to load before using naturalWidth/naturalHeight):

const img = document.getElementById('photo'); // the <img>
const marker = document.createElement('div');
marker.className = 'marker'; // .marker {position:absolute; pointer-events:none;}
document.body.appendChild(marker);

function placeMarker(imgX, imgY /* in natural-image pixels */) {
  const r = img.getBoundingClientRect();
  const scaleX = r.width / img.naturalWidth;
  const scaleY = r.height / img.naturalHeight;
  const x = r.left + imgX * scaleX;
  const y = r.top  + imgY * scaleY;
  marker.style.left = (x - marker.offsetWidth/2) + 'px';
  marker.style.top  = (y - marker.offsetHeight/2) + 'px';
}

If you need crisp drawing or many markers, overlay a canvas and account for devicePixelRatio so markers stay sharp on retina screens:

const dpr = window.devicePixelRatio || 1;
canvas.width = r.width * dpr;
canvas.height = r.height * dpr;
canvas.style.width = r.width + 'px';
canvas.style.height = r.height + 'px';
ctx.scale(dpr, dpr);
ctx.beginPath();
ctx.arc(imgX * (r.width/img.naturalWidth), imgY * (r.height/img.naturalHeight), 6, 0, Math.PI*2);
ctx.fill();

Troubleshooting notes: recalc on window resize or when the image changes size; ensure the image is fully loaded; if using a CSS background with cover/contain compute scale and letterbox offset first (scale = displayedWidth/naturalWidth or displayedHeight/naturalHeight, then add the horizontal/vertical offset) before placing markers. This gives predictable placement regardless of layout.

Recommended Answers

All 2 Replies

Member Avatar for fxm

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">
    function setXY() {
        var oZ = document.getElementById('z')

        function setX(x) {
            oZ.style.left = isNaN(x) ? 0 : x % 100
        }

        function setY(y) {
            oZ.style.top = isNaN(y) ? 0 : y % 100
        }

        setX(document.getElementById('x').value)
        setY(document.getElementById('y').value)

    }
    </script>
  </head>
  <body>
    <div onclick="setXY()" style=
    "position:absolute; top:0; left:0; height:120px; width:110px; background-color:yellow">
    </div>
    <div id='z' style="position:absolute; top:0; left:0">
      z
    </div><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form>
      x: <input id='x' value='0'> y: <input id='y' value='0'>
    </form>
  </body>
</html>

is a toy example.

In the general case you need to adjust the origin of the x/y values to match the current location of the background image and scale both ranges to match its dimensions.

Member Avatar for subhankar02dey

Thanks, i was jst looking for it
thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.