首页 > js获取网页图片坐标点问题。

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

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


@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)
    }

另发现一个不错的教程


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

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


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

【热门文章】
【热门文章】