用世博相机拍照

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!

以上是关于用世博相机拍照的主要内容,如果未能解决你的问题,请参考以下文章

世博会相机在 Android 设备上崩溃

世博相机没有显示相机看到的东西

世博会缺少相机胶卷权限

世博会相机 takePictureAsync ImageManipulator

世博会:世博构建和世博上传有啥区别

求一篇关于世博会的英语作文,复制粘贴的就算了,希望再加上翻译~