react-native-camera 中调整图片和视频的旋转角度

react-native-camera 中调整图片和视频的角度

前言

Android开发过程中,需要拍摄图片和视频,但是视频的拍摄角度不满足要求,需要调整;

要点

开发过程中调用react-native-camera,图片角度调整时,通过调整js层中对orientation的参数即可;视频角度调整时,需要调整预览窗口,预览角度正常,获取的视频角度也正常。

开发说明

图片角度调整

js层中调用orientation参数,即可进行旋转角度选择

that.camera.capture({
   quality: that.cameraParams.quality,
   //#auto:0,portrait:0,portraitUpsideDown:180,landscapeLeft:270,landscapeRight:90
   orientation: Camera.constants.Orientation.landscapeLeft,
})

视频角度调整(重点)

根据react-native-camera的程序,录像功能与预览显示一致,所以只要预览显示的是想要的角度,视频角度就正常。目标定为调整预览角度。
js层中预览显示部分,其中aspect采用Camera.constants.Aspect.fit,可在定义窗口中显示完整预览

 <Camera
      ref={ref => {
           this.camera = ref;
      }}
      style={styles.preview}
      aspect={Camera.constants.Aspect.fit}
      captureTarget={this.state.camera.captureTarget}
      type={this.state.camera.type}
      flashMode={this.state.camera.flashMode}
      orientation={Camera.constants.Orientation.portraitUpsideDown}
      onFocusChanged={() => {}}
      onZoomChanged={() => {}}
      defaultTouchToFocus
      mirrorImage={false}
/>

以上各项均有含义:
在这里插入图片描述
java层react-native-camera中调整预览的显示
关于摄像头的方向
相机的图像数据都是来自于硬件的图像传感器,摄像头的方向取决于图像传感器的安装方向。安装之后,有一个默认的取景方向,且不会被改变。
官方提供CameraInfo.orientation表示相机图像的方向。它的值是相机图像顺时针旋转到设备自然方向一致时的角度。例如假设设备是竖屏的。后置相机传感器是横屏安装的。当你面向屏幕时,如果后置相机传感器顶边的和设备自然方向的右边是平行的,则后置相机的orientation是90。如果前置相机传感器顶边和设备自然方向的右边是平行的,则前置相机的orientation是270

public void adjustPreviewLayout(int type) {
//...以上省略部分代码
	CameraInfoWrapper cameraInfo = _cameraInfos.get(type);
	int displayRotation;
	int rotation;
	int orientation = cameraInfo.info.orientation; //orientation :90  
	//int orientation = 270; //测试使用
	//_actualDeviceOrientation = 3; //测试使用
	if (cameraInfo.info.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
        rotation = (orientation + _actualDeviceOrientation * 90) % 360;
        displayRotation = (720 - orientation - _actualDeviceOrientation * 90) % 360;
     } else {
        rotation = (orientation - _actualDeviceOrientation * 90 + 360) % 360;
        displayRotation = rotation;
     }
     cameraInfo.rotation = rotation;
     // TODO: take in account the _orientation prop

     setAdjustedDeviceOrientation(rotation);
     camera.setDisplayOrientation(displayRotation);
//...以下省略部分代码
}

以上代码中:想要调整预览方向,可对orientation 或者 _actualDeviceOrientation 进行调整,该部分代码请查阅 react-native-camera中RCTCamera.java 源码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖。你可以通过运行以下命令来安装它们: ``` npm install react-native-svg react-native-svg-transformer ``` 2. 在项目的根目录下创建一个名为 `metro.config.js` 的文件(如果已存在,请跳过此步骤)。 3. 在 `metro.config.js` 文件添加以下内容: ```javascript module.exports = { transformer: { assetPlugins: ['react-native-svg-transformer'], }, }; ``` 4. 接下来,在你的组件,使用 `react-native-svg` 的 `<SvgUri>` 组件来加载本地 SVG 图像。首先,确保你的 SVG 图像位于项目的 `assets` 文件夹。 ```javascript import React from 'react'; import { View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; const MyComponent = () => { return ( <View> <SvgUri width={200} height={200} source={require('./assets/myImage.svg')} /> </View> ); }; export default MyComponent; ``` 在上面的示例,我们使用 `require` 方法加载位于 `assets` 文件夹的 `myImage.svg` 图像,并将其作为 `source` 属性传递给 `<SvgUri>` 组件。你可以根据自己的需要调整宽度和高度。 5. 确保你在重新启动 Metro Bundler 之前完成了以上步骤。你可以通过运行以下命令重新启动 Metro Bundler: ``` npx react-native start --reset-cache ``` 这样,你就可以使用 `react-native-svg` 和 `react-native-svg-transformer` 成功加载和显示本地 SVG 图像了。 希望对你有所帮助!如有任何疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值