如何在object-fit:scale-down的图片上获取精确触摸像素位置？

当图片设置object-fit: scale-down且实际图像尺寸小于img元素时，图像会在元素内居中显示，直接使用触摸事件的坐标会包含元素的留白区域，无法对应到真实图像像素。下面是React中的实现方案：

核心思路 #

1. 获取img元素的渲染尺寸和图像固有尺寸
2. 计算图像在元素内的偏移量（留白区域）
3. 将触摸坐标转换为相对于图像的真实像素位置

代码实现 #

import { useRef } from 'react';

function ImageTouchHandler() {
  const imgRef = useRef(null);

  const handleTouch = (e) => {
    const img = imgRef.current;
    if (!img) return;

    // 获取触摸点相对于视口的坐标
    const touch = e.touches[0] || e.changedTouches[0];
    const touchX = touch.clientX;
    const touchY = touch.clientY;

    // 获取img元素的视口位置和渲染尺寸
    const rect = img.getBoundingClientRect();
    const imgWidth = rect.width;
    const imgHeight = rect.height;

    // 获取图像固有尺寸（真实像素尺寸）
    const naturalWidth = img.naturalWidth;
    const naturalHeight = img.naturalHeight;

    // 计算图像在img元素内的偏移量（居中时的留白）
    const offsetX = (imgWidth - naturalWidth) / 2;
    const offsetY = (imgHeight - naturalHeight) / 2;

    // 计算触摸点相对于img元素的坐标
    const relativeX = touchX - rect.left;
    const relativeY = touchY - rect.top;

    // 转换为图像真实像素坐标（需判断是否在图像范围内）
    let imagePixelX = null;
    let imagePixelY = null;
    if (relativeX >= offsetX && relativeX <= offsetX + naturalWidth &&
        relativeY >= offsetY && relativeY <= offsetY + naturalHeight) {
      imagePixelX = relativeX - offsetX;
      imagePixelY = relativeY - offsetY;
    }

    // 此时imagePixelX/Y就是图像上的精确像素位置，超出范围则为null
    console.log('图像像素位置:', imagePixelX, imagePixelY);
  };

  return (
    <img
      ref={imgRef}
      src="/your-image-path.jpg"
      style={{
        width: '400px',
        height: '400px',
        objectFit: 'scale-down',
        border: '1px solid #ccc' // 方便查看元素范围
      }}
      onTouchStart={handleTouch}
      onTouchMove={handleTouch}
      onTouchEnd={handleTouch}
    />
  );
}

export default ImageTouchHandler;

关键说明 #

• naturalWidth/naturalHeight：获取图像的真实像素尺寸，不受CSS缩放影响
• getBoundingClientRect()：获取元素在视口中的位置和渲染尺寸，用于计算触摸点相对于元素的坐标
• 偏移量计算：因为scale-down在图像小于容器时会居中显示，所以偏移量是容器与图像尺寸差的一半
• 范围判断：确保触摸点确实落在图像区域内，避免返回无效的像素坐标

内容的提问来源于stack exchange，提问作者PlayerG9