如何在React Native Vision Camera中调整照片尺寸/裁剪并生成清晰方形小图？

AI 小北

2026-8-1

解决方形清晰文字照片的捕获问题

你的核心问题出在两点：一是强制设置宽高但未保证相机捕获的原始画面为方形，二是优先选择速度牺牲了画质，导致文字模糊。下面是调整后的解决方案：

步骤1：确保相机捕获画面为方形

先将相机组件的比例设置为1:1，保证原始捕获画面就是方形，避免后期拉伸变形：

// 示例Camera组件配置（以React Native Camera为例）
<Camera
  ref={camera}
  style={styles.cameraContainer}
  ratio="1:1" // 关键：锁定方形拍摄比例
  // 其他必要属性...
/>

步骤2：调整拍照参数优先保证画质

修改takePhoto的配置项，把质量优先级改为画质优先，同时合理限制尺寸：

const capturePhoto = async () => {
    const options = {
      qualityPrioritization: 'quality', // 改为优先画质，保障文字清晰
      skipMetadata: true,
      flash: 'off',
      maxWidth: 500, // 用maxWidth/maxHeight限制最大尺寸，避免强制拉伸
      maxHeight: 500,
      resizeMode: 'cover', // 按比例裁剪为方形
    };

    if (camera.current !== null) {
      const photo = await camera.current.takePhoto(options);
      // 可选：用图片处理工具二次优化文字清晰度
      const optimizedPhoto = await ImageManipulator.manipulateAsync(
        photo.uri,
        [{resize: {width: 500, height: 500}}],
        {compress: 0.8, format: 'png'} // PNG格式更适合文字场景，压缩比不宜过高
      );
      console.log(`优化后照片尺寸：${optimizedPhoto.width}x${optimizedPhoto.height}`);
    }
  };