当前位置：首页 > VUE

vue扫码功能实现

2026-01-22 01:22:16VUE

实现Vue扫码功能的几种方法

在Vue中实现扫码功能可以通过多种方式完成，以下是几种常见的方法：

使用HTML5的getUserMedia API

这种方法适用于现代浏览器，可以直接调用摄像头进行扫码：

<template>
  <div>
    <video ref="video" width="300" height="200" autoplay></video>
    <canvas ref="canvas" width="300" height="200" style="display:none;"></canvas>
  </div>
</template>

<script>
import jsQR from 'jsqr';

export default {
  mounted() {
    this.initCamera();
  },
  methods: {
    async initCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      this.$refs.video.srcObject = stream;
      this.scanQRCode();
    },
    scanQRCode() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');

      const scan = () => {
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
          canvas.height = video.videoHeight;
          canvas.width = video.videoWidth;
          context.drawImage(video, 0, 0, canvas.width, canvas.height);
          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
          const code = jsQR(imageData.data, imageData.width, imageData.height);

          if (code) {
            console.log('Found QR code', code.data);
            // 处理扫描结果
          }
        }
        requestAnimationFrame(scan);
      };
      scan();
    }
  }
};
</script>

使用第三方库vue-qrcode-reader

vue-qrcode-reader是一个专门为Vue设计的二维码扫描组件：

npm install vue-qrcode-reader

<template>
  <qrcode-stream @decode="onDecode"></qrcode-stream>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader';

export default {
  components: { QrcodeStream },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString);
      // 处理扫描结果
    }
  }
};
</script>

使用ZXing库

ZXing是一个功能强大的二维码处理库：

npm install @zxing/library

<template>
  <div>
    <video ref="video" width="300" height="200" autoplay></video>
  </div>
</template>

<script>
import { BrowserQRCodeReader } from '@zxing/library';

export default {
  mounted() {
    this.initZXing();
  },
  methods: {
    async initZXing() {
      const codeReader = new BrowserQRCodeReader();
      try {
        const result = await codeReader.decodeFromVideoDevice(
          null,
          this.$refs.video,
          (result, error) => {
            if (result) {
              console.log(result.getText());
              // 处理扫描结果
            }
          }
        );
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

移动端使用Cordova/电容插件

对于移动端应用，可以使用Cordova或Capacitor插件：

npm install cordova-plugin-qrscanner

methods: {
  scanQR() {
    QRScanner.scan((err, contents) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log(contents);
      // 处理扫描结果
    });

    QRScanner.show();
  }
}