??? ?? ?? ?? ??? ? ?? ??? ??

??? ??? ?????? ???? ???? ?? ? ??? ??? ??????? ???? ????????. ??? ???? ?? ???? ???? ???? ????? ??? ?? ???? ?? ? ?? ?? ??? ??? ???? ????. ? ????? ?? ???? ???? ???? ??? ?? ???? ???? ??? ?? ?????.

??? ?? ??

??? ?? ???? ????? ???? ??? ?? ??? ?? ??? ? ??? ??? ?? ????? ???? ????. ???? ??? ?? ??? ???, ??? ?? ? ???? ??? ???? ??? ??? ???? ??? ??????. ??? ??? ?? ???? ??? ????, ?? ??? ???? ???????? ???? ??? ?????.

??? : vue.js? ???? ? ??? ????

?? ??? ?? ?? ??? ??? ??? ????? vue.js ??? ??? ???? ??? ?? ??????? ???? ?? ????. ??? ? ?? ??? ?? ?? ?? ?? ??? ????? ?? ? ? ??????. ?? ??? ??? ????.

1. ???? ?? ???? ?? : ?? ?? ???? ???? ??? ?? SDK? ????. ??? ?? ??? ?? ??? ??? ???????.

   • ??? ? ???? : ?? ???? ?? ?? ?? ?? vue.js ???? ?? SDK??? ? ????. ??? ???? ??? ???? ??? ???? ?? ??? ?????.
   • WebUSB/WebHid : ?? ??? WebUSB ?? WebHid ??? ???? ?? ?? ????? ???? ?? ???? API? ?? ?? ??? ? ? ????. ??? ? ?? ??? ??? ???? ?????.
   • ??? ???? ??? : ?? ? ???? ???? ?? ? ??? ?? ????? ????? ?? ????? ????? vue.js ?? ????? ???????. ?? ???? ? ?? ?? ????? ??? ?????.

2. ?? ?? ?? : ?? ???? ??? ???? ?? ???? ?? ???? ??? ??? ?? ??? ?????? ????????. ??? ?? ?? ?? ???? ??? ?? ??? ???? ??? ?? ?? ? ?? ?? ??????. ? ??? ??? takePicture() ? uploadImage() ? ?? ?? ?????? ???? vue.js ?? ?? ?? ??? ? ? ????.

3. ?? ??? ???? : vue.js ?? ??? ???? ?? ??? ??? ?????.

   • ??? : ??? ???? ?? ??? ?? ?? ??? ??????.
   • ??? ????? : ??? ???? ???? ?? ???? ?? ? takePicture() ???? ??????.
   • ??? ?? (?? ??) : ??, ?? ?? ?? ????? ??? ??? ???? ??? ??? ? ??? ??? ??????.
   • ??? : ?? ???? ?? ? uploadImage() ???? ???? ??? ???? ??? ??????. ????? Axios ?? Fetch API? ?? ??? ???????.

?? ?? ? ?? ( HighScanner ?? ?? ??? ?? ??? ??? ??) :

<template>
  <div>
    <button>?? ???</button>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="??? ???? ?? ??? ????? ?? ??? ??? ???? ??? ??????">
  </div>
</template>

<script>
import HighScanner from './HighScanner';

export default {
  components: { HighScanner },
  data() {
    return {
      imageSrc: null,
    };
  },
  methods: {
    takePicture() {
      this.$refs.scanner.takePicture()
        .then(imageData => {
          this.imageSrc = imageData;
          // 調(diào)用上傳方法
          this.$refs.scanner.uploadImage(imageData);
        })
        .catch(error => {
          console.error('拍照失敗:', error);
        });
    },
  },
};
</script>

??? ????, ???? ?? ??? ??? ?? ???? ???? ?? ???? ???? ????? ???? ???? ?? ?? ??? ??? ?? ? ? ????. ??? ???? ??? ??? ??? ?? ????? ??? ??? ????.

? ??? ??? ???? ?? ??? ????? ?? ??? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!