使用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/[email protected]/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元素然後作爲參數將其傳入