Question

我有一个反应本机组件，我正在尝试捕获图像。

问题是当我捕捉图像时，它返回一个黑色图像。

我的组件如下：

import React from 'react';
var inspect = require('util-inspect');
import { Text, View, TouchableOpacity, Button, Image } from 'react-native';
import { Camera, Permissions, takeSnapshotAsync } from 'expo';

export default class CameraScreen extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    imageUrI: ''
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  async capture(e){
    console.log('e', takeSnapshotAsync)

    try{
        let result = await takeSnapshotAsync(this.refs.camera, {
          format: 'png',
          result: 'file',
        });

        this.setState({imageUrI: result})
        this.upload(result)

        console.log("result", result)   
    }catch(err){
        console.log('err', err)
    }


  }

  upload(photo_uri){
    const data = new FormData();
        data.append('name', 'testName'); // you can append anyone.
        data.append('webcam', {
          uri: photo_uri,
          type: 'image/png', // or photo.type
          name: 'testPhotoName'
        });
        fetch('http://0647ad02.ngrok.io/upload', {
          method: 'post',
          body: data
        }).then(res => {
          console.log('res', res)
        }).catch(err => {
            console.log("err", err)
        })
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else if (this.state.imageUrI) {
      return (<Image
                style={{flex: 1}}
                source={{uri: this.state.imageUrI}}
              />);
    } else {

      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
          }}
         >
            <Camera 
                style={{ flex: 3 }} 
                type={this.state.type}
                ref="camera"
            >

            </Camera>

            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>

              <TouchableOpacity
                style={{
                  flex: 0.5,
                  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
                style={{
                  flex: 0.5,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => this.capture()}>
                <Text
                  style={{ borderColor: 'white', borderWidth: 1, borderRadius: 100, width: 100, height: 100, fontSize: 18, marginBottom: 10, color: 'white' }}>
                  {' '}
                </Text>
              </TouchableOpacity>

            </View>

          </View>

      );
    }
  }
}

如您所见，我有一个从expo导入的<Camera>组件。然后，它有一个触摸组件来处理capture()操作。

我的捕获函数正在使用this.refs.camera来定位视图，然后传递选项以返回文件和png作为结果。

我猜这是错误的两个选项之一？要么是我的目标是错误的元素（我试过别人无济于事）或者返回的文件实际上并不存在？我已经尝试返回二进制文件，但在上传功能中发布时遇到了问题。

我是在正确的轨道上吗？

我在运行Android 6.0.1的Android One Plus 2手机上进行测试

由于

Answer 1

不幸的是，Camera目前不支持Expo的

.takeSnapshotAsync。有关更多详细信息，请参见https://github.com/expo/expo/issues/1003

从expo takeSnapshotAsync捕获的黑色图像

1 个答案: