You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何获取expo-camera待拍摄照片尺寸并匹配相机组件大小

可以实现,核心是对齐相机预览组件和拍摄输出的宽高比,不存在跨设备通用的固定尺寸配置,必须结合当前设备摄像头支持的输出参数动态计算,具体方案如下:

核心逻辑

expo-camera默认预览和输出照片不匹配,本质是预览容器的宽高比和相机传感器实际输出的照片宽高比不一致,组件默认会用aspectFill模式填充容器,导致预览内容被裁切、拉伸,只要严格对齐两者比例,就能做到预览所见即拍摄所得,没有内容偏差。

通用实现步骤(Managed / Bare Flow 均适用)
    1. 获取目标输出尺寸
      挂载Camera组件前,先调用Camera.getAvailablePictureSizesAsync(ratio)方法,传入你计划使用的拍摄比例(比如'4:3'是绝大多数设备默认的全传感器拍照比例,'16:9'是常见的全屏比例),拉取当前选中的摄像头(前置/后置)支持的所有对应比例分辨率,选定你要使用的输出档位,比如最高分辨率的{width: 4032, height: 3024}(对应4:3比例)。
      注意切换前后置摄像头时,必须重新调用该方法拉取对应摄像头的尺寸列表,不同摄像头支持的分辨率参数不通用。
    1. 动态计算预览组件尺寸
      先通过onLayout事件或者DimensionsAPI获取相机承载容器的实际可用宽高,再按照选定输出照片的宽高比,计算容器内可完整承载的最大预览尺寸,保证宽高比和输出照片完全一致,参考计算代码:
    import { Dimensions } from 'react-native';
    // 选定的输出照片尺寸
    const targetPhotoSize = { width: 4032, height: 3024 };
    const photoAspectRatio = targetPhotoSize.width / targetPhotoSize.height;
    const containerWidth = Dimensions.get('window').width;
    // 以容器宽度为基准撑满,高度按比例换算
    const previewSize = {
      width: containerWidth,
      height: containerWidth / photoAspectRatio
    };
    
    1. 对齐组件配置与拍摄参数
      将计算得到的previewSize设置为Camera组件的样式宽高;Android端需要额外给Camera组件传入ratio属性,值和你选定的拍摄比例字符串完全一致(比如'4:3'),iOS端无需单独传该参数。
      调用takePictureAsync拍摄时,传入的ratio、quality参数要和之前选定的输出配置保持一致,不要让系统自动调整分辨率。
Bare Flow 场景专属优化方案

Bare Flow下可直接修改原生层配置,实现比JS层更精准的尺寸匹配:

  • Android端:在原生CameraView配置逻辑中,直接给CameraCaptureSession绑定和预览Surface完全一致的输出尺寸,将SCALER_CROP_REGION参数设置为全传感器区域,关闭系统默认的预览裁切逻辑,从底层保证预览和输出的像素范围完全对齐。
  • iOS端:将AVCaptureSession的sessionPreset设置为你需要的固定分辨率档位,把AVCaptureVideoPreviewLayer的videoGravity属性修改为AVLayerVideoGravity.resizeAspect,不要使用默认的resizeAspectFill模式,避免预览层自动裁切内容填充布局。
  • 对精度要求极高的场景,可以直接在原生层完成拍照逻辑,再将生成的图片回传给JS层,避免JS桥接过程中参数传递错误导致的尺寸偏差。

常见踩坑提示:不要给Camera组件写死固定宽高值,不同设备的摄像头传感器比例差异很大,写死尺寸必然会出现部分设备预览拉伸、预览边缘内容不在最终照片里的问题;如果同时使用录像功能,需要单独调用视频尺寸查询接口获取对应参数,和拍照尺寸分开计算。

内容的提问来源于stack exchange,提问作者genchemmer1234

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 18:09:16