<template>
  <div>
    <h1>点击拍照</h1>
    <!-- 使用 input 元素触发拍照 -->
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      capture="camera"
      @change="handleFileChange"
    >

    <br><br>

    <!-- 显示拍照后的图片 -->
    <img
      v-if="imageSrc"
      :src="imageSrc"
      alt="拍照结果"
      style="max-width: 100%; height: auto;"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: null, // 存储拍照后的图片地址
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        // 使用 FileReader 读取文件内容
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageSrc = e.target.result // 设置图片源
        }
        reader.readAsDataURL(file) // 以 Data URL 形式读取文件
      }
    },
  },
}
</script>

<style scoped>
/* 样式可以根据需求进行调整 */
</style>
