使用qrcode-decoder读取页面上的二维码信息

前言：有时候页面上会生成一些二维码信息然后对其进行识别并读取二维码里面的内容然后做一些相应的处理，今天来介绍下插件qrcode-decoder的使用，这个插件可以说可以很轻松的实现我们的需求，接下来我们来看下这个插件

官网地址

方式一

Use pnpm to install.

1. 使用npm/pnpm/cnpm方式

pnpm install --save qrcode-decoder

2. 项目中引入

import QrcodeDecoder from 'qrcode-decoder';

方式二

Using in browser:

<script src="https://unpkg.com/qrcode-decoder@0.3.1/dist/index.min.js"></script>

3. 使用
   User new to create a decoder object.

var qr = new QrcodeDecoder();

decodeFromImage(img, options)

Decodes an image from url or an <img> element with a src attribute set.

qr.decodeFromImage(img).then((res) => {
console.log(res);
});

使用该方法需要获取到img元素的src属性然后作为参数将其传入
举例：

const img = document.querySelector('img')
const imgSrc = img.getAttribute('src')
const res = await qr.decodeFromImage(imgSrc)

decodeFromVideo(videoElem, options)

Decodes directly from a video with a well specified src attribute

qr.decodeFromVideo(videoElement).then((res) => {
console.log(res);
});

使用该方法需要获取到video元素的src属性然后作为参数将其传入具体代码同上

decodeFromCamera(videoElem, options)

Decodes from a videoElement.

qr.decodeFromCamera(videoElem).then((res) => {
console.log(res);
});

使用该方法需要获取到video元素然后作为参数将其传入