用世博相机拍照
Posted
技术标签:
【中文标题】用世博相机拍照【英文标题】:take a picture with expo camera 【发布时间】:2019-11-14 16:17:47 【问题描述】:我正在尝试为 react-native expo 应用程序拍照,但我无法弄清楚,以下关于堆栈溢出的答案没有帮助:How to snap pictures using expo react native camera?。
我的代码主要来自他们网站 (https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync) 上的博览会演示,除了我添加了一个我想用来拍照的图片按钮。有人可以帮我吗?
我已经尝试过使用上述堆栈溢出帮助,但它不起作用。
import React from 'react';
import Text, View, TouchableOpacity, Image from 'react-native';
import * as Permissions from 'expo-permissions';
import Camera from 'expo-camera';
export default class CameraExample extends React.Component
state =
hasCameraPermission: null,
type: Camera.Constants.Type.back,
;
async componentDidMount()
const status = await Permissions.askAsync(Permissions.CAMERA);
this.setState( hasCameraPermission: status === 'granted' );
render()
const hasCameraPermission = this.state;
if (hasCameraPermission === null)
return <View />;
else if (hasCameraPermission === false)
return <Text>No access to camera</Text>;
else
return (
<View style= flex: 1 >
<Camera style= flex: 1 type=this.state.type>
<View
style=
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
>
<TouchableOpacity
style=
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
onPress=() =>
this.setState(
type:
this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
);
>
<Text style= fontSize: 18, marginBottom: 10, color: 'white' > Flip </Text>
</TouchableOpacity>
<TouchableOpacity>
<Image source=require("./images/camera.jpeg")
style=width: 100,
height: 100 /> /* this is my button for taking the picture*/
</TouchableOpacity>
</View>
</Camera>
</View>
);
我现在只想拍张照片并显示到控制台。
【问题讨论】:
【参考方案1】:在这部分代码中,您需要设置一个 onPress 动作来“捕捉”一张图片。 我的建议很简单,添加一个
<TouchableOpacity onPress=() => takePicture()>
<Image source=require("./images/camera.jpeg") style=width: 100, height: 100 />
</TouchableOpacity>
并添加Async函数接收实际图片:
const takePicture = async () =>
if (this.camera)
const options = quality: 1, base64: true;
const data = await this.camera.takePictureAsync(options);
console.log(data);
;
转到您的终端,您会看到带有 Image BASE64 Image 的日志。
希望对你有帮助:)
【讨论】:
谢谢@Carlos Almeida!以上是关于用世博相机拍照的主要内容,如果未能解决你的问题,请参考以下文章