javascript - 如何获取鼠标点击的位置并在图像上添加标记(标记)？

Question

我想添加图像并在此图像上添加标记(标记)，就像 facebook 在图像上标记一样。如何获取图像上标签的 X 和 Y(不是屏幕上的 X 和 Y)并将其显示在图像上(记住响应式)。

Answer 1

 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);


   }