QR code 生成的相关参数

2023-03-03 20:42

QR code 本身就是把文字生成一个二维码的过程，顶多指定一下纠错等级。但是有些硬件设备只支持特定参数的二维码，所以我就查了一下二维码的相关规范了解一下生成过程中需要哪些参数。

# version

二维码有一个 version 参数，范围是从 1 到 40。每个版本都具备固有的码元结构(码元数)，码元是指构成 QR 码的方形黑白点。“码元结构”是指二维码中的码元数。从版本 1(21 码元 ×21 码元)开始，在纵向和横向各自以 4 码元为单位递增，一直到版本 40(177 码元 ×177 码元)。规律是 4n +17 (n 代表版本号)。版本越大能容纳的信息就越多，一般是选择能容纳所需信息的最小版本即可。

# error correction level

QR 码具有纠错功能，保证二维码在丢失一定数据的情况下还是可以读取。纠错有四个级别分别是：

L (Low) 纠错 7%
M (Medium) 纠错 15%
Q (Quartile) 纠错 25%
H (High) 纠错 30%

纠错能力越高需要存储的信息就越多，对应需要的 version 就要越高。

# mask

mask 是为了防止二维码有大量空白或者填充，让扫描器尽可能容易的进行扫描。mask 方案目前有 8 种。

Mask Pattern

选择 mask 的方案有相关的标准可以自行查询，本质目标是让生成的图片尽量黑白相间，避免同一颜色的色块大量出现，方便扫描器读取数据。

# 总结

普通业务使用的二维码相关库应该只提供文本接口和纠错标准的设定，会根据文本长度和纠错标准来自动其他两个参数。但是针对特殊需求的情况下就需要把 version 和 mask 参数暴露出来。同时因为手动指定 version 也会因为 version 版本太低导致无法生成合法的二维码的情况。使用的时候需要注意。我本身有修改一个版本可以传入底层参数，可以看一下参考链接。

# 参考

Information capacity and versions of QR Code (opens new window)

What is a QR code? (opens new window)

QR Code generator (opens new window)

Reed–Solomon codes for coders (opens new window)

qrcodegen (opens new window)

网页调用摄像头读取QR code

2022-12-17 17:29

qrcode

2022 年也要结束了，博客不能停更。最近项目中有读取 QR 码的需求，于是便调研了下如何实现这个功能，顺便写篇博客记录下。

# 现成 React 框架

首先调研了别人封装好的现成框架，React QR Reader (opens new window)。这个框架看起来还挺流行的，可是最新版本的发布已经是 2019 年了。而且有一个致命的 BUG 就是在开启摄像头之后无法关闭。必须重新刷新页面才行，这是不能接受的。

# 低层封装框架

发现大家基本都是调用@zxing/browser (opens new window)来完成核心功能的。于是我也使用这个框架封装一个不就好了。首先安装相关依赖：

pnpm add @zxing/browser @zxing/library

具体的封装代码如下：

const QrReader: React.FC<IQrReaderProps> = ({
  videoId = 'video',
  scanDelay = 500,
  constraints = {
    facingMode: 'environment'
  },
  className = '',
  onResult
}) => {
  const stopRef = useRef(false);
  const videoRef = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    if (videoRef.current) {
      const codeReader = new BrowserQRCodeReader(undefined, {
        delayBetweenScanAttempts: scanDelay
      });
      stopRef.current = false;
      codeReader
        .decodeFromConstraints(
          {
            video: constraints
          },
          videoRef.current,
          (result, error, controls) => {
            onResult && onResult(result, error, controls);
            if (stopRef.current) {
              controls.stop();
            }
          }
        )
        .catch(error => {
          onResult && onResult(undefined, error);
        });
    }
    return () => {
      stopRef.current = true;
    };
  }, [videoId, scanDelay, constraints, onResult]);
  return (
    <section className={cls(styles.reader, className)}>
      <div className={styles.container}>
        <ViewFinder />
        <video
          muted
          ref={videoRef}
          className={styles.video}
          style={{
            transform:
              constraints?.facingMode === 'user' ? 'scaleX(-1)' : 'none'
          }}
        />
      </div>
    </section>
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

这里使用了 stopRef 来标记组件的销毁并停止调用摄像头。本身封装也不复杂，没必要使用别人封装的轮子。完整的代码在simple-qr-reader (opens new window)

# 总结

前端生态非常完善，使用现成的库就可以非常方便的实现调用摄像头读取二维码功能。

# 参考

@zxing/browser と React の組み合わせで QR Code Reader 作る (opens new window)