2 篇文章带有标签 “encoding”

笔记

调试二维码识别与生成工具的几点经验

下午折腾了两个纯前端二维码工具:一个识别器、一个生成器。记录下调试过程中踩过的几个坑,免得以后重复踩。

1. 中文二维码识别出来是空的

用的是 jsQR。识别英文二维码没问题,但中文二维码识别结果直接为空。

查了下,jsQR 返回的对象里有两个字段:

  • code.data:legacy 字符串,对多字节字符支持不好
  • code.binaryData:原始字节数组

正确做法是用 binaryData 配合 TextDecoder 按 UTF-8 解码:

function decodeQRData(code) {
  if (code.binaryData && code.binaryData.length) {
    const bytes = new Uint8Array(code.binaryData);
    return new TextDecoder('utf-8').decode(bytes);
  }
  return code.data || '';
}

图片识别和摄像头扫码两处都要走这个解码逻辑。

2. 中文二维码生成后扫描乱码

生成器中 qr.addData(value) 对中文支持不行,需要先做一次 UTF-16 到 UTF-8 的字节转换:

命令base64

编码

macOS

base64 file

Linux

-w, --wrap=COLS wrap encoded lines after COLS character (default 76). Use 0 to disable line wrapping

base64 -w0 file

解码

base64 -d

问题

YWRtaW4=admin 的 base64 编码。

  • 解码(正确,这里之所以正确是因为base64过滤了。)
$ echo 'YWRtaW4=' | base64 -d
admin[username@hostname ~]$
  • 编码(错误,这是因为 echo 输出字符后会在后面再输出换行符。)
$ echo 'admin' | base64
YWRtaW4K

解决方案

  • 方法一:使用 printf 命令。
$ printf 'admin' | base64
YWRtaW4=
  • 方法二:可以通过参数 -n 告诉 echo 不输出换行符。
$ echo -n 'admin' | base64
YWRtaW4=
  • 方法三:可以通过参数 -e 告诉 echo 启用反斜杠转义的解释。
$ echo -e 'admin\c' | base64
YWRtaW4=

可用的转义符(来自 man echo): - \ backslash - \a alert (BEL) - \b backspace - \c produce no further output - \e escape - \f form feed - \n new line - \r carriage return - \t horizontal tab - \v vertical tab - \0NNN byte with octal value NNN (1 to 3 digits) - \xHH byte with hexadecimal value HH (1 to 2 digits)