前端生成二维码并检查

[Dream4ever]

实现方案

二维码生成

用到了 soldair / node-qrcode 这个库。

核心代码如下：

// 引入依赖
import QRCode from 'qrcode'

const opts = {
  // 7% 的容错率
  errorCorrectionLevel: 'L',
  // PNG 格式图片
  type: 'png',
  // 码点与图片边界留出两个码点的距离
  margin: 2,
  // 图片宽高为 260px
  width: 260,
}

// 生成二维码
const img = await QRCode.toDataURL(url, opts)
// 将二维码的内容显示在 img 元素中
document.querySelectorAll('.qrcode img')[i].src = img

二维码检查

用到了 nuintun / qrcode 这个库。

核心代码如下：

// 引入依赖
import { Decoder } from '@nuintun/qrcode'

// 检查二维码
// 这里的 img 为前面生成二维码时保存的 img 变量
const qrcode = new Decoder()
const result = await qrcode.scan(img)
// 解析出的二维码 URL 就在 data 属性中
if (result.data === ...)