在Vue中實現(xiàn)二維碼生成與掃描功能的方法

更新時間：2023年06月21日 09:13:25 作者：程序媛-徐師姐

二維碼是一種廣泛應用于各種場合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實現(xiàn)二維碼的生成和掃描的方法

Vue中如何進行二維碼生成與掃描？

二維碼生成

要實現(xiàn)二維碼的生成，我們可以使用qrcodejs2庫。qrcodejs2是一個簡單、輕量級的JavaScript庫，可以在瀏覽器中生成二維碼。

以下是一個使用qrcodejs2庫實現(xiàn)二維碼生成的示例：

<template>
  <div>
    <input type="text" v-model="text" />
    <div ref="qrcode"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      text: "Hello World"
    };
  },
  mounted() {
    new QRCode(this.$refs.qrcode, this.text);
  }
};
</script>

在上面的代碼中，我們首先引入了qrcodejs2庫。然后，在模板中使用input元素綁定到text變量上，使用ref指令引用到一個div元素上，用于生成二維碼。在mounted鉤子中，我們使用new QRCode()創(chuàng)建一個二維碼，傳入div元素和文本內(nèi)容。

需要注意的是，qrcodejs2庫依賴于canvas元素，因此在使用時需要確保瀏覽器支持canvas元素。

二維碼掃描

要實現(xiàn)二維碼的掃描，我們可以使用vue-qrcode-reader組件。vue-qrcode-reader是一個基于zxing-js的Vue組件，可以在瀏覽器中進行二維碼掃描。

以下是一個使用vue-qrcode-reader組件實現(xiàn)二維碼掃描的示例：

<template>
  <div>
    <div v-if="!hasCamera">
      沒有檢測到攝像頭，請在支持WebRTC的瀏覽器中打開。
    </div>
    <div v-else>
      <video ref="video" :width="videoWidth" :height="videoHeight"></video>
      <canvas ref="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      <button @click="startScan">開始掃描</button>
      <div v-if="result">{{ result }}</div>
    </div>
  </div>
</template>
<script>
import QrcodeReader from "vue-qrcode-reader";
export default {
  components: {
    QrcodeReader
  },
  data() {
    return {
      hasCamera: true,
      videoWidth: 640,
      videoHeight: 480,
      result: ""
    };
  },
  methods: {
    startScan() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d");
      navigator.mediaDevices
        .getUserMedia({
          video: { width: this.videoWidth, height: this.videoHeight }
        })
        .then(stream => {
          video.srcObject = stream;
          video.play();
          const tick = () => {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
              context.drawImage(video, 0, 0, this.videoWidth, this.videoHeight);
              const imageData = context.getImageData(0, 0, this.videoWidth, this.videoHeight);
              const code = QrcodeReader(imageData);
              if (code) {
                this.result = code.data;
                stream.getTracks().forEach(track => track.stop());
              }
              requestAnimationFrame(tick);
            }
          };
          requestAnimationFrame(tick);
        })
        .catch(error => {
          console.error(error);
          this.hasCamera = false;
        });
    }
  }
};
</script>

在上面的代碼中，我們首先引入了vue-qrcode-reader組件。然后，在模板中使用video元素和canvas元素來實現(xiàn)二維碼掃描。在data中，我們定義了一些變量，包括是否檢測到攝像頭、視頻和畫布的大小以及掃描結果。在methods中，我們定義了startScan方法來啟動二維碼掃描。

在startScan方法中，我們首先獲取視頻和畫布元素，創(chuàng)建一個畫布上下文對象。然后，使用navigator.mediaDevices.getUserMedia()方法獲取音視頻流，并將其賦值給視頻元素。在視頻元素準備好后，我們使用requestAnimationFrame()方法來不斷繪制視頻幀，并使用QrcodeReader()函數(shù)來識別二維碼。如果識別成功，我們將掃描結果賦值給result變量，并停止音視頻流。如果發(fā)生錯誤，我們將hasCamera變量設置為false。

需要注意的是，二維碼掃描需要使用攝像頭功能，因此在使用時需要確保瀏覽器支持WebRTC，并且用戶已經(jīng)授權使用攝像頭。