如何获取图像像素坐标与' object-fit: contain '

Question

我目前正在显示具有object-fit: contain属性的图像，以确保长宽比保留并显示完整的图像。

然而，现在，我需要在点击这个图像时做出反应，并获得被点击点相对于图像原点的坐标。

有办法吗?还是我自己重新计算实际的位置偏移量?

Answer 1

@mousetail似乎是对的，我发现除了我自己的代码什么也没有。

默认object-position值为object-fit: contain时才有效。

const image = document.querySelector('img')
const matrix = new DOMMatrix()
// First, center the image
const elementCenter = new DOMPoint(image.clientWidth / 2, image.clientHeight / 2)
const imageCenter = new DOMPoint(image.naturalWidth / 2, image.naturalHeight / 2)
matrix.translateSelf(elementCenter.x - imageCenter.x, elementCenter.y - imageCenter.y)
// And now zoom
// Containing the object take the minimal zoom
const zoom = Math.min(image.clientWidth / image.naturalWidth, image.clientHeight / image.naturalHeight)
matrix.scaleSelf(zoom, zoom, 1, imageCenter.x, imageCenter.y)
// Have fun

最后，如果您想转换一个点(例如从MouseEvent)，那么您必须在其上应用反向矩阵:

const point = new DOMPoint(12, 13)
const imagePoint = matrix.inverse().transformPoint(point)

注意，这个转换应该在之后应用从transformCSS属性到图像本身的转换。