如何在 React Native 中显示 expo 相机的图像

Question

我正在使用应用程序中的相机，在那里我拍了一张照片并转换为 base64 现在我想显示图像但无法显示图像。 有人可以帮助我如何实现这一目标。

谢谢

  takePicture = async () => {
    if (this.camera) {
        let photo = await this.camera.takePictureAsync({
            base64: true,
        });
        this.props.cameraToggle(false);
        this.props.image(photo)
        console.log('@@@ take picutre', photo)
    }
}

我要渲染的图像代码

<Image source={{uri:`data:image/png;base64,${cameraImage}`}} style={{width:100,height:100}}/>

Answer 1

我假设您使用的是基于类的组件。 您可以通过将响应photo设置为本地状态并有条件地渲染它来渲染从camera捕获的image 。

import React from "react";
import { Image } from "react-native";
import { Camera } from "expo-camera";
import Constants from "expo-constants";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";

class Cameras extends React.Component(props) {
  state = {
    captures: "",
  };

  takePicture = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync({
        base64: true,
      });
      this.props.cameraToggle(false);
      this.setState({ captures: photo.uri });
    }
  };

  render() {
    const { captures } = this.state;
    return (
      <View flex={1}>
        {this.state.captures ? (
          <Image source={{ uri: captures }} style={{width:50,height:50}} />
        ) : (
          <Camera {...pass in props} />
        )}
      </View>
    );
  }
}

export default Cameras;

注意：更简洁的方法是通过导航不同的屏幕并在该屏幕上渲染图像来将状态captures作为路由参数传递。

Answer 2

我假设您将 photo 的值存储在cameraImage 。 我正在使用 expo image picker 与您分享一个可行的解决方案，试一试

您的组件

import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

<TouchableHighlight onPress={this._openCamera}>
    <Text>Open Camera</Text>
</TouchableHighlight>

<Image source={this.state.mainImageUrl} />

你的职能

_openCamera = async () => {
    await Permissions.askAsync(Permissions.CAMERA);
    try {
        let result: any = await ImagePicker.launchCameraAsync({
            base64: true,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
        if (!result.cancelled) {
            this.setState({
                mainImageUrl: { uri: `data:image/jpg;base64,${result.base64}` }
            });
        }
    } catch (E) {
        console.warn(E);
    }
}

Answer 3

你的代码：

 let photo = await this.camera.takePictureAsync({
     base64: true,
 });
 this.props.image(photo)

takePictureAsync 返回 object，因此您的 base64 数据位于photo.base64字段中。

解决方案 2

您可以在没有 base64 的情况下将 URI 存储到 state 中。

const [photoUri, setPhotoUri] = React.useState(null);
  const cameraRef = React.useRef(null);
  const takePhoto = async () => {
      setPhotoUri(null);
      const camera = cameraRef.current;
      if(!camera) return;
      try {
          const data = await camera.takePictureAsync();
          setPhotoUri(data.uri);
      } catch (error) {
          console.log('error: ', error);
      }
  }

然后使用它。

return (
     <Image source={{uri: photoUri}} />
);

希望能帮助到你。