Vue 实现 上传图片 二维码识别 + 条形码识别(qrcode-decoder插件)

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <canvas ref="qrCanvas"></canvas>
  </div>
</template>
 
<script>
import QrDetector from 'qrcode-decoder';
 
export default {
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) {
        return;
      }
 
      const reader = new FileReader();
      reader.onload = (loadEvent) => {
        const image = new Image();
        image.onload = () => {
          this.detectQRCode(image);
        };
        image.src = loadEvent.target.result;
      };
      reader.readAsDataURL(file);
    },
    detectQRCode(image) {
      const canvas = this.$refs.qrCanvas;
      const context = canvas.getContext('2d');
      const detector = new QrDetector();
 
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0, image.width, image.height);
 
      const imageData = context.getImageData(0, 0, image.width, image.height);
      const result = detector.detect(imageData.data, image.width, image.height);
 
      if (result) {
        console.log('QR Code detected:', result);
      } else {
        console.log('No QR Code detected.');
      }
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中处理文件上传，并使用qrcode-decoder插件来识别上传图片中的二维码或条形码。当文件被选中后，图片会被读取并在canvas上绘制，然后调用detectQRCode方法来识别图片中的二维码。如果识别到二维码，它会在控制台输出；如果没有识别到，则输出相应信息。