javascript - js获取网页图片坐标点问题。

Question

想在一个图片上单击某个位置，然后获取该点的坐标系，为了保证图片缩放时，坐标点会指定在图片的同一个地方，请问该如何实现呢？

Answer 1

你需要获取4个参数，点击事件的offsetX, offsetY, 现在图片的宽高，
这样你的点击位置在原始图片中的相对位置就是
x=offsetX/currentWidth
y的计算和x类似

相对位置是0到1之间的数，和缩放无关。只要相对位置一致，或者在你允许的误差区间内，你都可以认为是一个位置

Answer 2

我感觉可以这样，点击图片获取文档流中点击位置（pageX，pageY），获取点击图片的长度（width）和宽度（height）。获取图片在文档流中的位置（imgX, imgY）。
计算点在图片的百分比位置。X = (pageX - imgX) / width Y = (pageY - imgY) / height

Answer 3

@ssruoyan @flybywind 感谢指点，这是最后实现的代码：

<img id="monitor_map" src="../2.jpg" class="col-md-12" style="margin:0;padding: 0" onclick="mapOnClick(event)"/>

 function mapOnClick(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        alert(x + ':' + y)
    }

另发现一个不错的教程