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

这就是我在单击图像进行图像转换时获得单击位置的方式。但我的问题是，图像具有CSS属性

max width:1000px

。因此，该代码仅适用于较小的图像。对于较大的图像，位置结果不是单击的真实像素

我的问题是，是否有可能计算出自然大小图像的正确点击位置。另一种方法是使用实际图像大小设置一些数据属性，如

数据宽度：“1200px”

和

数据高度：“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 };
}

---

试试这个，适合所有尺寸

           $('.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 );
            });

---

工作fiddel:

试试这个，可以在所有尺寸上工作

           $('.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 );
            });

---

工作fiddel:

如果您知道自然尺寸和当前尺寸，我认为您可以这样做：

naturalClickPosX = (naturalWidth / currentWidth) * currentClickPosX;

naturalClickPosY = (naturalHeight / currentHeight) * currentClickPosY;

看看JSFIDLE

HTML

---

如果您知道自然尺寸和当前尺寸，我认为您可以这样做：

naturalClickPosX = (naturalWidth / currentWidth) * currentClickPosX;

naturalClickPosY = (naturalHeight / currentHeight) * currentClickPosY;

看看JSFIDLE

HTML

---

这将适用于其自然大小的图像，而不是OP要求的图像。这将适用于其自然大小的图像，而不是OP要求的图像。无需使用

数据宽度

/

数据高度

您可以从图像中获得

自然宽度

和

自然高度

。查看我的更新答案。无需使用

数据宽度

/

数据高度

您可以从图像中获得

自然宽度

和

自然高度。看看我更新的答案。只是为了更好的理解：如果我需要相反的东西怎么办？如果我有一个点的自然位置，我想在大小图像上显示它？我这样问是因为我将自然位置保存在DB中，并将元素显示为图像上的绝对位置。但是，如果图像已调整大小，则位置不正确。相反，请将sizedSize除以naturalSize，然后乘以naturalPosition。如下所示：
sizedPosX=（sizedWidth/naturalWidth）*naturalPosX
。顺便说一句，这只是数学，使用比率。在这个具体的例子中，以宽度（1200自然尺寸，1000尺寸）为例，自然尺寸更大，系数为
1.2
（1200/1000）。因此，我们将通过单击获得的值乘以
1.2
sizedPosX*1.2
是我们想要的。非常感谢。我将尝试编写一个带有参数的函数来获得所需的值（除法或乘法）。只是为了更好地理解：如果我需要相反的东西怎么办？如果我有一个点的自然位置，我想在大小图像上显示它？我这样问是因为我将自然位置保存在DB中，并将元素显示为图像上的绝对位置。但是，如果图像已调整大小，则位置不正确。相反，请将sizedSize除以naturalSize，然后乘以naturalPosition。如下所示：
sizedPosX=（sizedWidth/naturalWidth）*naturalPosX
。顺便说一句，这只是数学，使用比率。在这个具体的例子中，以宽度（1200自然尺寸，1000尺寸）为例，自然尺寸更大，系数为
1.2
（1200/1000）。因此，我们将通过单击获得的值乘以
1.2
sizedPosX*1.2
是我们想要的。非常感谢。我将尝试编写一个带有参数的函数，以获得所需的值（除法或乘法）。