在缩放图像上获得正确的单击位置

Get correct click position on scaled image

本文关键字：单击 位置 缩放 图像      更新时间：2023-09-26

这就是我在点击图像进行图像转换时获得点击位置的方法。但我的问题是，图像具有CSS属性max-width: 1000px。因此，该代码只适用于较小的图像。对于较大的图像，位置结果不是点击的真实像素。

我的问题是，是否可以计算出自然大小图像的正确点击位置。另一种选择是设置一些具有真实图像大小的数据属性，如data-width: '1200px'和data-height: '1000px'。但我还是要做一些计算。

parentPosition = getPosition(event.currentTarget),
x = event.clientX - parentPosition.x,
y = event.clientY - parentPosition.y;
function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

如果你知道自然大小和当前大小，我认为你可以这样做：

naturalClickPosX = (naturalWidth / currentWidth) * currentClickPosX;
naturalClickPosY = (naturalHeight / currentHeight) * currentClickPosY;

看看这个JSFiddle

HTML

<img src="http://placehold.it/1200x1000" width="1000">

JavaScript

$('img').on("click", function(e){
    var $img = $(this);
    var currentClickPosX = e.pageX - $img.offset().left;
    var currentClickPosY = e.pageY - $img.offset().top;
    var currentWidth = $img.width();
    var currentHeight = $img.height();
    var naturalWidth = this.naturalWidth;
    var naturalHeight = this.naturalHeight;
    var naturalClickPosX = ((naturalWidth / currentWidth) * currentClickPosX).toFixed(0);
    var naturalClickPosY = ((naturalHeight / currentHeight) * currentClickPosY).toFixed(0);
    alert("Current X: " + currentClickPosX + " Current Y: " + currentClickPosY + 
          "'r'nNatural X: " + naturalClickPosX + " Natural Y: " + naturalClickPosY);
});

试试这个，将适用于所有尺寸的

           $('.img-coordinate').click(function(e){
            var parentOffset = $(e.target).parent().offset();
            // here the X and Y on Click
            X = e.pageX - $(e.target).offset().left;
            Y = e.pageY - $(e.target).offset().top;
                alert(X + ' , ' + Y );
            });

工作基准：https://jsfiddle.net/h09kfsoo/

相关文章：