code-lab/index.html

<template>
  <div>
    <video ref="video" width="640" height="480" autoplay></video>
    <button @click="capture">拍照</button>
    <canvas ref="canvas" width="640" height="480" style="display:none;"></canvas>
    <div v-if="results.length > 0">
      <h3>请选择最相似的标准图片：</h3>
      <div v-for="(result, index) in results" :key="index">
        <p>{{ result.name }} - 相似度: {{ result.similarity }}%</p>
        <button @click="selectImage(result.name)">选择</button>
      </div>
    </div>
    <div v-if="selectedData">
      <h3>选择的图片数据：</h3>
      <ul>
        <li v-for="(item, index) in selectedData" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: [],
      selectedData: null
    };
  },
  mounted() {
    this.startCamera();
  },
  methods: {
    startCamera() {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
          this.$refs.video.srcObject = stream;
        })
        .catch(err => {
          console.error("Error accessing the camera: ", err);
        });
    },
    capture() {
      const canvas = this.$refs.canvas;
      const video = this.$refs.video;
      canvas.getContext('2d').drawImage(video, 0, 0, 640, 480);
      canvas.toBlob(blob => {
        const formData = new FormData();
        formData.append('file', blob, 'photo.png');

        const uploadUrl = 'http://localhost:5500/upload';
        fetch(uploadUrl, {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          this.results = data;
        });
      }, 'image/png');
    },
    selectImage(name) {
      const selectUrl = 'http://localhost:5500/select';
      fetch(selectUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name })
      })
      .then(response => response.json())
      .then(data => {
        this.selectedData = data;
      });
    }
  }
};
</script>