vue实现二维码上传识别

最新推荐文章于 2025-11-11 23:23:12 发布

原创最新推荐文章于 2025-11-11 23:23:12 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在HTML中使用jsQR和qrcode-reader库来扫描上传的图片中的二维码，包括文件选择、Canvas绘制和二维码解码的过程。

1、下载 jsqr 和 qrcode-reader

npm i jsqr qrcode-reader

2、使用

<template>
  <div>
    <input type="file" accept="image/*" @change="onFileChange">
    <canvas class = "canvas" ref="canvas"></canvas>
    {{com}}
  </div>
</template>

<script>
import jsQR from 'jsqr'
import QrCode from 'qrcode-reader'
export default {
  name: 'ScanQRCode',
  data(){
    return {
        com: ""
    }
  },
  methods: {
    jump() {
     window.open(this.com)
    },
    async onFileChange(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = () => {
        const img = new Image()
        img.onload = () => {
          const canvas = this.$refs.canvas;
          const context = canvas.getContext('2d')
          context.drawImage(img, 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) {
            this.com = code.data;
            this.jump()
          } else {
            this.com = "无法识别";
          }
        }
        img.src = reader.result;
      }
      reader.readAsDataURL(file);
    },
    parseQrCode(imageUrl) {
        return new Promise((resolve, reject) => {
            const qr = new QrCode();
            const img = new Image();
            img.onload = () => {
                qr.callback = (err, result) => {
                    if (err) {
                        debugger
                        reject(err);
                    } else {
                        resolve(result);
                    }
                };
                qr.decode(img);
            };
            img.src = imageUrl;
        });
    }
  },
  mounted() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
        const video = document.createElement('video');
        video.srcObject = stream;
        video.play();
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext('2d');
        const qr = new QrCode();
        const scan = () => {
            if (video.paused || video.ended || video.readyState < 2) {
            setTimeout(scan, 100);
            return;
            }
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            try {
            qr.decode(canvas.toDataURL());
            } catch (err) {}
            setTimeout(scan, 100);
        };
        scan();
        });
    }
  }
}
</script>

<style scoped>
.canvas{
    display: none;
}
</style>

3、选择文件中保存好的二维码上传

二维码生成网址草料二维码生成器