如何使用 vue native 使用 expo-camera 拍摄照片？

Question

我是 vue native 的新手，我正在尝试在应用程序上创建一个页面，我可以在其中使用相机并使用 expo-camera 指令捕捉和显示照片。

这是我所做的：

<template>
  <view class="view-container">

    <view class="container">
       <text>Camera screen</text>
       <camera class="container" :type="this.type" />
       <touchable-opacity 
       class="camera-touchable-opacity"
       :on-press="capturePic"
       >
     </view>

     <view class="home-btn">
        <button title="Go to home screen" @press="goToHomeScreen"></button>
     </view>
  </view>
</template>

<script>
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';

export default {
  props: {
    navigation: { type: Object }
  },
  data: function() {
    return {
       hasCameraPermission: false,
       type: Camera.Constants.Type.back,
    };
  },
  mounted: function() {
     Permissions.askAsync(Permissions.CAMERA)
       .then(status => {
           hasCameraPermission = status.status == "granted" ? true : false;
       }).catch((err)=>{
           console.log(err);
       });
  },
  components: { Camera },
  methods: {
    goToHomeScreen() {
      this.navigation.navigate("Home");
    },
    capturePic: async function() {
      if(!camera) return
      const photo = await camera.takePictureAsync();
    }
  }
}
</script>

我收到此警告： [未处理的承诺拒绝：ReferenceError：找不到变量：相机]

我不知道我需要什么，因为我在文档中没有找到任何关于拍摄照片的内容。

Answer 1

您可以在方法中将相机引用为 this.$refs.camera，因为您需要在代码中将元素引用为 ref="camera"..

<camera class="container" :type="this.type" ref="camera"/>

捕获函数将是this.$refs.camera.takePictureAsync()

在您的代码中

capturePic: async function() {
  if(!camera) return
  const photo = await camera.takePictureAsync();
}

如何使用 vue native 使用 expo-camera 拍摄照片？

How to capture a photo with expo-camera using vue native?

javascript

expo

vue-native