0

I want to add image and add tagged (marks) on this image like facebook tagged on image. How to get X and Y of tag on image (not X and Y of the screen) and show it on image (keep in mind responsive).

Mohammad Nizar Arbash
  • 43
  • 8
  • 1
    Possible duplicate of [How do I get the coordinates of a mouse click on a canvas element?](https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element) – Alireza A2F Jun 21 '19 at 17:56
  • You should look into canvas element and how to get X and Y of canvas element i think. – Noob Jun 21 '19 at 17:59
  • You could do X = x2 - x1, where x2 is the X of the screen and x1 is the X of the image element (and do the same for Y.) – Cat Jun 21 '19 at 18:12

1 Answers1

0
 function onClickOnImage(event) {
        //get image 
       var image = document.getElementById("p_image");


       var x;
       var y;

       //get x and y start image 
       var rect = image.getBoundingClientRect();
       var pointOfstartImageLeft = rect.left;
       var pointOfstartImageTop= rect.top;


       //calc x and y
       x = event.pageX - pointOfstartImageLeft;
       y = event.pageY - pointOfstartImageTop;

       //debugger;

       // get width and height for image in screen
       var width = image.clientWidth;
       var height = image.clientHeight;

       // calc x and y percent 
       var x_percent = (x * 100) / width;
       var y_percent = (y * 100) / height;

       alert('X is : '+ x_percent + ' Y is :'+ y_percent);


   }
Mohammad Nizar Arbash
  • 43
  • 8