React Native Camera人脸检测框裁剪异常问题求助

问题根源 #

RNCamera返回的人脸bounding box是基于相机预览画面的坐标，但拍摄出的图片分辨率和预览分辨率往往不一致，再加上前置摄像头的镜像效果、屏幕宽高比适配等因素，直接用预览坐标去裁剪图片必然会出现错位。

解决步骤 #

1. 建立预览与图片的坐标映射 #

首先获取相机预览尺寸和实际图片尺寸，计算两者的缩放比例，同时处理前置摄像头的镜像翻转：

// 假设已获取人脸数据faces和拍摄图片的imageUri
const handleFaceCrop = async (faces, imageUri) => {
  if (!faces.length) return;
  const face = faces[0];
  // 从RNCamera实例获取预览尺寸（可通过onCameraReady回调提前存储）
  const { width: previewW, height: previewH } = cameraRef.current.getPreviewSize();
  // 获取图片实际分辨率
  const [imgW, imgH] = await Image.getSize(imageUri);

  // 分别计算宽高的缩放比例（避免宽高比不一致导致偏移）
  const scaleX = imgW / previewW;
  const scaleY = imgH / previewH;

  // 前置摄像头人脸坐标是镜像的，需翻转X轴
  let cropX = face.bounds.origin.x;
  if (cameraType === RNCamera.Constants.Type.front) {
    cropX = previewW - face.bounds.origin.x - face.bounds.size.width;
  }

  // 转换为图片实际坐标（取整避免像素偏差）
  const cropParams = {
    offset: {
      x: Math.round(cropX * scaleX),
      y: Math.round(face.bounds.origin.y * scaleY),
    },
    size: {
      width: Math.round(face.bounds.size.width * scaleX),
      height: Math.round(face.bounds.size.height * scaleY),
    },
    // 可选：设置裁剪后输出的尺寸，按需调整
    displaySize: { width: face.bounds.size.width, height: face.bounds.size.height },
    resizeMode: 'cover',
  };

  try {
    const croppedUri = await ImageEditor.cropImage(imageUri, cropParams);
    // 处理裁剪后的图片，比如显示到界面
    setCroppedFace(croppedUri);
  } catch (err) {
    console.error('裁剪失败:', err);
  }
};

2. 关键注意事项 #

• 坐标原点对齐: RNCamera预览和图片的坐标原点均为左上角，但要确保两者的显示方向一致（避免因旋转导致的坐标偏移）。
• 宽高比例分离: 禁止使用统一缩放比例，必须分别计算X、Y轴的缩放值——如果预览和图片宽高比不同，统一比例会导致裁剪区域拉伸或错位。
• 镜像翻转: 前置摄像头的人脸框是左右镜像的，必须对X坐标做反向计算，否则裁剪出的人脸会出现在相反位置。

3. 调试验证 #

可以打印转换前后的坐标，用图片工具（如系统预览工具查看像素坐标）对比确认：

console.log('预览人脸框:', face.bounds);
console.log('转换后图片坐标:', cropParams.offset, cropParams.size);

根据实际像素位置调整参数，确保坐标对应正确的人脸区域。

额外排查点 #

• 检查RNCamera的faceDetectionMode是否设为accurate，精准模式下的人脸框定位更准确。
• 确认拍照时的相机模式，比如是否开启“全屏拍照”——部分设备的全屏模式会对图片进行裁剪，导致预览与图片的尺寸映射关系变化。

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