vue实现扫码解析

使用 vue-qrcode-reader 库实现扫码

安装 vue-qrcode-reader 库：

npm install vue-qrcode-reader

在 Vue 组件中引入并使用：

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

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

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

使用 Html5Qrcode 库实现扫码

安装 html5-qrcode：

npm install html5-qrcode

Vue 组件实现：

<template>
  <div id="qr-reader" style="width: 300px"></div>
</template>

<script>
import { Html5Qrcode } from 'html5-qrcode'

export default {
  mounted() {
    const html5QrCode = new Html5Qrcode("qr-reader")
    const config = { fps: 10, qrbox: 250 }

    html5QrCode.start(
      { facingMode: "environment" },
      config,
      (decodedText) => {
        console.log(decodedText)
        // 处理扫描结果
      },
      (errorMessage) => {
        // 处理错误
      }
    )
  }
}
</script>

使用 ZXing 库实现扫码

安装 @zxing/library：

npm install @zxing/library

Vue 组件实现：

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

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

export default {
  data() {
    return {
      codeReader: new BrowserMultiFormatReader()
    }
  },
  mounted() {
    this.codeReader.decodeFromVideoDevice(
      undefined,
      this.$refs.video,
      (result, err) => {
        if (result) {
          console.log(result.text)
          // 处理扫描结果
        }
        if (err && !(err instanceof ZXing.NotFoundException)) {
          console.error(err)
        }
      }
    )
  },
  beforeDestroy() {
    this.codeReader.reset()
  }
}
</script>

实现本地图片二维码解析

使用 vue-qrcode-reader 解析本地图片：

<template>
  <qrcode-capture @decode="onDecode" />
  <input type="file" @change="onFileChange" />
</template>

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

export default {
  components: { QrcodeCapture },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString)
    },
    onFileChange(event) {
      const file = event.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.$refs.qrCapture.decode(e.target.result)
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

扫码功能优化建议

添加摄像头切换功能：

<template>
  <qrcode-stream 
    @decode="onDecode" 
    :camera="camera"
    @init="onInit"
  />
  <button @click="switchCamera">切换摄像头</button>
</template>

<script>
export default {
  data() {
    return {
      camera: 'auto',
      cameras: []
    }
  },
  methods: {
    onInit(promise) {
      promise.then(({ capabilities }) => {
        this.cameras = capabilities
      })
    },
    switchCamera() {
      this.camera = this.camera === 'auto' ? 'off' : 'auto'
    }
  }
}
</script>

添加扫描框样式美化：

.qr-box {
  border: 2px solid #3eaf7c;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  position: relative;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
}

.qr-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #3eaf7c;
  animation: scan 2s infinite linear;
}

@keyframes scan {
  0% { top: 0 }
  100% { top: 100% }
}

注意事项

确保在移动设备上测试扫码功能，不同设备可能有不同的摄像头权限要求

在组件销毁时关闭摄像头，避免资源泄漏：

beforeDestroy() {
  if (this.codeReader) {
    this.codeReader.reset()
  }
}

处理扫描错误和权限问题：

methods: {
  onInit(promise) {
    promise.catch(error => {
      if (error.name === 'NotAllowedError') {
        alert('请允许摄像头访问权限')
      } else if (error.name === 'NotFoundError') {
        alert('未找到摄像头设备')
      } else {
        alert('摄像头初始化错误')
      }
    })
  }
}