xuqinggang/blog

二维码小知识，node实现彩色二维码

xuqinggang opened this issue · 0 comments

xuqinggang commented

二维码小知识，基于node-qrcode实现彩色二维码

主要利用**qrcode进行了一些业务要求的功能扩展，实现彩色二维码**

对前端来说，有很多库可以实现展示二维码，设置logo、前景色背景色之类。比如:

  • qr-image纯js实现
  • qrcode很强大，也支持node端，但不支持设置logo
  • awesome-qr更加多样性，在浏览器端支持设置logo，背景图。但在node端不支持设置logo，背景图

其实这些库支持在浏览器端设置logo，基本上都是利用canvas，把logo图绘制上去的
所以在node端有node-canvas，所以在node也可按浏览器那种方式利用canvas绘制logo，如下图
image

其实已经有了这么多的库，已经可以满足我们各种各样的需求，但是满足不了PM的呀~.~。因为有了pm，所以有了接下里的二维码调研+实现。
因为此处二维码的功能是用海报系统对接的，所以实现一个最简单的二维码或者带logo的二维码都很容易

但PM要实现一种像后端一样的好看的二维码(上图三)，为了满足PM，决定对海报系统的二维码进行优化。所以要对二维码原理有所了解，下面先讲解下二维码基本原理（编码+识别）不对具体实现做讲解，然后讲下如何利用node实现(如上图三)美化后的二维码.

二维码QRCode基本原理

二维码，基本可分为行排式二维条码和矩阵式二维条码。行排式二维码就是一维条形码，矩阵式二维码，最流行的就是QRCode，具有代表性的矩阵式二维条码有：Code One、MaxiCode、QR Code、 Data Matrix、Han Xin Code、Grid Matrix 等。QRCode 全名是 Quick Response Code，是一种可以快速识别的二维码。

1. Version、尺寸

QRCode 有不同的 Version ，不同的 Version 对应着不同的尺寸。将最小单位的黑白块称为 module。
常见的 QRCode 一共有40种尺寸：

  • Version 1 : 21 * 21 modules
  • Version 2 : 25 * 25 modules
  • …
  • Version 40: 177 * 177 modules

QRCode 尺寸的公式如下：

*Version V = ((V-1)4 + 21) ^ 2 modules。可以看出是从21开始，以4递增的。
尺寸越大，所能编码的信息就越多。一般我们不需手动指定version，会自动根据我们所编码的信息，选择相应的Version

2. 二维码结构组成

image

2.1 功能图形

功能图形是不参与编码数据的区域。它包含空白区、位置探测图形、位置探测图形分隔符、定位图形、校正图形五大模块。

  • 空白区：留白的地方。qrcode-margin的设置，默认4
  • Position Detection Pattern（位置探测图形）：位于三个角落，可以快速检测二维码位置，帮助我们从任何角度（斜着，倒着）扫码的时候，都能快速识别
    image
    Structure of Position Detection Pattern，如下图，可以看出所占的module比例，很重要（后面我们要据此找到最中间的3x3的module绘制随机色）
    image
  • 附带讲下，module（码元）:QRCode中最基本的单位，前景色（黑色）为1，背景色（白色）为0。默认情况下每个module由4x4个像素组成（由qrcode-scale设置）
    Notice: 但如果我们设置了宽度，module可以是浮点数x浮点数个像素组成（qrcode-scale计算）
  • 位置探测图形分隔符：主要作用是区分功能图形和编码区域。
  • 定位图形：它由黑白间隔的各自各自组成的线条。主要用于指示标识密度和确定坐标系。原因是 QR 码一种有 40 个版本，也就是说有 40 种尺寸。每种二维码的尺寸越大，扫描的距离就越远。
  • 校正图形：只有 Version 2 及以上的QR码有校正标识。校正标识用于进一步校正坐标系。
2.2 编码区域

编码区域是数据进行编码存储的区域。它由格式信息、版本信息、数据和纠错码字三部分构成。

  • 格式信息： 所有尺寸的二维码都有该信息。它存放一些格式化数据的信息，例如容错级别、数据掩码，和额外的自身 BCH 容错码。
  • 版本信息：版本信息是规定二维码的规格。前面讲到 QR 码一共有 40 种规格的矩阵（一般为黑白色），从21x21（版本1），到177x177（版本40），每一版本符号比前一版本 每边增加4个模块。
  • 数据和纠错：主要是存储实际数据以及用于纠错码字。

纠错能力：对变脏和破损的适应能力强
QR码具备“纠错功能”，即使部分编码变脏或破损，也可以恢复数据。数据恢复以码字为单位（是组成内部数据的单位，在QR码的情况下，每8比特代表1码字），最多可以纠错约30%（根据变脏和破损程度的不同，也存在无法恢复的情况）。
二维码有如下四种纠错级别：
ERROR_CORRECT_L：大约<=7%的错误能纠正过来
ERROR_CORRECT_M：大约<=15%的错误能纠正过来
ERROR_CORRECT_Q：大约<=25%的错误能纠正过来
ERROR_CORRECT_H：大约<=30%的错误能纠正过来
当纠错级别越高时，二维码能容纳的数据量就越少。正是因为二维码具有一定的纠错能力，所以在二维码中间覆盖一层logo是没有问题的，只要控制好覆盖面积。
以25%的纠错级别为例，中间logo所占二维码的最大比例为25%x25%=0.0625，所以有时候要重新计算logo宽高
image

以上只对二维码基本概念做了些讲解，具体二维码编码过程不讨论（没了解透）
了解了一些基本概念，其实也可以实现PM的基本需求了，随机色+logo。
附：二维码为什么可以彩色？（简单来说，是通过灰度化和二值化，即把彩色图片经过灰度化和二值化变成只有黑白(只有0,1的矩阵)的数据，具体涉及到图像处理)
下面基于qrcode库用node实现彩色二维码+logo，具体请看