Javascript 如何使用“对象拟合：包含”获取图像像素坐标`

我目前正在使用

对象匹配：contain

属性显示图像，以确保保留纵横比并显示完整图像

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

---

有办法吗？或者我应该自己重新计算实际位置偏移量吗？

@mousetail似乎是对的，我只找到了自己的代码。它仅适用于

对象拟合：包含
和默认
对象位置
值的情况

const image=document.querySelector（'img'））
常量矩阵=新的DOMMatrix（）
//首先，将图像居中
const elementCenter=new DOMPoint（image.clientWidth/2，image.clientHeight/2）
const imageCenter=new DOMPoint（image.naturalWidth/2，image.naturalHeight/2）
矩阵.translateSelf（elementCenter.x-imageCenter.x，elementCenter.y-imageCenter.y）
//现在缩放
//包含对象时将进行最小缩放
const zoom=Math.min（image.clientWidth/image.naturalWidth，image.clientHeight/image.naturalHeight）
矩阵.scaleSelf（缩放，缩放，1，imageCenter.x，imageCenter.y）
//玩得开心

最后，如果要转换点（例如，从
MouseEvent
），则必须对其应用反向矩阵：

const point=new DOMPoint（12,13）
常量imagePoint=matrix.inverse（）.transformPoint（点）

请注意，此转换应在图像本身的
transform
CSS属性的转换后应用。
您必须自己计算坐标