为什么世博相机和vue-本地的相机没有捕捉到图像？

Question

我正在努力学习vue-母语，并创建一个实践应用程序，使用相机和捕捉图像。在文档中，他们使用一些ref为其分配相机，但我不知道在vue-本地传递ref的确切方法。我做了很少的家庭作业，在git上发现了这个问题，但也没有帮助。

参考文献： https://github.com/GeekyAnts/vue-native-core/issues/88

医生(vue-本地)： https://vue-native.io/docs/device-apis.html#Camera

Doc (展览馆)： https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync

代码片段是：

<template>
  <view class="container">
    <camera 
      class="camera" 
      :type=type
      ref="camera"  
    >
      <view class="camera-view-1">
          <view class="camera-view-2">
            <view class="camera-view-3">
              <touchable-opacity 
                class="camera-touchable-opacity"
                :on-press="_takePicture"
              >
                <text style="color: #FF0000">Capture</text>
              </touchable-opacity>
            </view>
          </view>
        </view>    
    </camera>
    <view>
      <touchable-opacity
        :on-press="_changeCamera">
        <text class="change-cam"> Change Camera </text>
      </touchable-opacity>
      <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 {
  data: function() {
    return {
      hasCameraPermission: false,
      type: Camera.Constants.Type.back,
      img: '',
    };
  },
  props: {
    navigation: { type: Object }
  },
  methods: {
    goToHomeScreen() {
      this.navigation.navigate("Home");
    },
    _changeCamera: function() {
        this.type = (this.type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back);
    },
    _takePicture: async function() {
      if(!camera) return;
      const photo = await camera.takePictureAsync();
    }
  },
  mounted: function() {
    Permissions.askAsync(Permissions.CAMERA)
      .then(status => {
        hasCameraPermission = status.status == "granted" ? true : false;
      }).catch((err)=>{
          console.log(err);
      });
  },
  components: { Camera },
};
</script>

<style>
.container, .camera {
  flex: 1;
}

.change-cam {
  color: #FF0000;
  text-align: center;
}
</style>

当我点击捕获按钮时，我得到一个没有定义camera的错误。我想我没有正确地使用ref。有人能建议在vue-native中使用它的正确方法吗？谢谢

Answer 1

#In which code open camera and take picture# 
#Note: npm/yarn install expo-permissions#
#npm/yarn install expo-camera#    
    <template>
      <view class="container">
        <camera
          class="container"
          :type="this.type"
          ref="this.camera"
          v-if="!!myPreviewImg.uri === false"
        />
        <touchable-opacity
          class="camera-touchable-opacity"
          :on-press="capturePic"
          :disabled="!readyCapture"
          v-if="!!myPreviewImg.uri === false"
        >
          <text :style="{ color: 'white', fontSize: 20, backgroundColor: 'blue' }"
            >Take Picture</text
          >
        </touchable-opacity>
    
        <View v-if="!!myPreviewImg.uri === true">
          <Image style="width: 100%; height: 95%" :source="myPreviewImg"> </Image>
          <touchable-opacity class="camera-touchable-opacity" :on-press="close">
            <text :style="{ color: 'white', fontSize: 20, backgroundColor: 'blue' }"
              >Close</text
            >
          </touchable-opacity>
        </View>
      </view>
    </template>
    <script>
    import * as Permissions from "expo-permissions";
    import { Camera } from "expo-camera";
    
    export default {
      data: function () {
        return {
          hasCameraPermission: false,
          type: Camera.Constants.Type.back,
          isPreview: false,
          ref: null,
          cameraRef: "",
          readyCapture: false,
          myPreviewImg: {
            uri: false,
          },
        };
      },
      mounted: function () {
        this.cameraPic();
      },
      methods: {
        capturePic: async function () {
          let data = await this.$refs["this.camera"].takePictureAsync();
          console.log("photo", data);
          this.myPreviewImg = {
            uri: data.uri,
          };
          this.readyCapture = true;
        },
        cameraPic: async function () {
          let { status } = await Camera.requestPermissionsAsync();
          if (status === "granted") {
            console.log("Permission to access location was denied");
            this.hasCameraPermission = status == "granted" ? true : false;
            console.log(this.hasCameraPermission);
            this.readyCapture = true;
            return;
          }
        },
        close: function () {
          this.myPreviewImg = {
            uri: false,
          };
        },
      },
      components: { Camera },
    };
    </script>
    <style>
    .container {
      flex: 1;
    }
    .text-color-primary {
      color: blue;
    }
    </style>

Answer 2

您可以在您的方法中将相机称为this.$refs.camera，因为您在代码中将元素上的引用定义为ref=" camera“。

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

在你的代码中

_takePicture: async function() {
      if(!camera) return;
      const photo = await this.$refs.camera.takePictureAsync();
    }