React中点击图片如何获取点击位置的坐标？

要获取图片自身范围内的点击坐标，不能直接用e.clientX/e.clientY（这是相对于浏览器视口的坐标），需要结合图片元素的位置和尺寸计算相对坐标，具体实现如下：

步骤1：创建图片引用 #

用useRef获取图片DOM元素的引用：

import { useRef } from 'react';

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

  // 后续的点击处理函数写在这里

  return (
    <img 
      ref={imgRef}
      src="你的摄像头画面地址" 
      onClick={handleImageClick}
      alt="摄像头实时画面"
      // 可根据需求设置显示样式，比如固定宽高
      style={{ width: '640px', height: '480px', objectFit: 'contain' }}
    />
  );
}

步骤2：编写点击处理函数 #

在点击事件中，通过getBoundingClientRect()获取图片的视口位置，再计算相对坐标：

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

  // 获取图片元素在视口中的位置和尺寸
  const rect = img.getBoundingClientRect();
  
  // 计算相对于图片左上角的坐标（当前显示尺寸下）
  const relativeX = e.clientX - rect.left;
  const relativeY = e.clientY - rect.top;

  // 如果需要对应图片原始尺寸的坐标（比如摄像头画面的真实像素位置）
  // 用原始尺寸和显示尺寸的比例转换
  const scaleX = img.naturalWidth / img.width;
  const scaleY = img.naturalHeight / img.height;
  const originalX = relativeX * scaleX;
  const originalY = relativeY * scaleY;

  console.log("显示尺寸下的点击坐标：", relativeX, relativeY);
  console.log("原始尺寸下的点击坐标：", originalX, originalY);
};

关键说明 #

• getBoundingClientRect()返回的left/top是图片左上角相对于视口的距离，减去这个值就能得到图片内部的相对坐标。
• naturalWidth/naturalHeight是图片的原始像素尺寸，width/height是当前显示的尺寸，两者的比例可以把显示坐标转换为原始画面的真实坐标，适合摄像头画面这种可能被缩放的场景。
• 如果图片是动态加载的（比如摄像头流），确保图片加载完成后再处理点击，避免rect数据不准确。

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