vue实现二维码上传识别

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、选择文件中保存好的二维码上传

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值