【Web技术】1130- 有趣的二维码

本文内容与技术关系不大，纯粹是一个简单的分享，内容主要是二维码的设计原理以及一些有趣的扩展，感兴趣的同学可以继续往下看~

二维码原理

优点

二维码出现之前，在需要使用类似编码的场景时，采用的都是一维码（条形码）；但是条形码承载的信息太少，只能用于一些很简单的场景，因此条形码除了用于商品等信息，并没有广泛流行。

二维码具有以下优点：

高密度编码，信息容量大：可容纳多达 1850 个大写字母或 2710 个数字或 1108 个字节，或 500 多个汉字，比普通条码信息容量约高几十倍。
编码范围广：该条码可以把图片、声音、文字、签字、指纹等可以数字化的信息进行编码，用条码表示出来；可以表示多种语言文字；可表示图像数据。
容错能力强，具有纠错功能：这使得二维条码因穿孔、污损等引起局部损坏时，照样可以正确得到识读，损毁面积达 50% 仍可恢复信息。
译码可靠性高：它比普通条码译码错误率百万分之二要低得多，误码率不超过千万分之一。
可引入加密措施：保密性、防伪性好。
成本低，易制作，持久耐用。
条码符号形状、尺寸大小比例可变。
二维条码可以使用激光或CCD阅读器识读。

简介

我们可以先试着生成一个二维码。https://kazuhikoarase.github.io/qrcode-generator/js/demo/

如图可以发现，二维码有 4 个可变项，其中主要的 2 个为：

版本（TypeNumber）

一共有 40 个尺寸，对应 40 个版本；Version1是 21*21 的矩形，之后每增加一个版本，就增加4的尺寸，即（v-1）4+21，最高是Version40，177177 的正方形。

容错率（ErrorCorrectionLevel）

二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。二维码有 4 个容错等级：

根据以上配置不同，相同的内容，在不同的配置下产生的二维码不一样，但扫出的内容是一样的。

设计原理

日常我们看到的二维码就是一张由黑白色块混合在一起的一张图片，我们肯定也知道这些黑白色块就是内容的某种编码，但其实除了内容外，二维码还有许多其他辅助扫码识别的信息。

如上图，按右侧标识的从上到下的顺序，分别是：

功能区：

位置探测图形：位于左上、左下、右上的三个矩形，可以说是二维码最重要的组成部分。
- 确定二维码的放置方向：不管顺着扫倒着扫，都可以准确找到第一个编码字符的位置（左上矩形的右边）；如果任一矩形被遮挡，扫描设备将无法定位。
- 确定编码字符的边界：确定编码字符的上下左右边界，不被周围其他信息干扰。
位置探测图形分隔符：位置探测图形周围的白边，用于分割位置探测图形和数据。
定位图形：三个位置探测图形之间的两根“线”，用于确定二维码符号中模块的坐标（相当于坐标轴）。
校正图形：用于校正定位（只有版本2以上有），版本越高个数越多，以校正可能发生的定位偏移。

从谷歌搜二维码图片，可以观察下，这些二维码都具有位置探测图形、位置探测图形分隔符及定位图形。其中第三幅，定位图形不太对，也确实就扫不出来。

数据区：

格式信息：存放包括纠错码类型、掩码类型等信息。
数据和纠错码字：最主要的部分，用于存放数据和纠错信息。

除掉定位区以及格式信息，数据和纠错码字的排布如下：

生成流程

在所有数据都完成放置之后，还有一步操作：添加掩码。掩码主要是为了避免，如果出现大面积的空白或黑块，导致我们扫描识别的困难。常用的掩码如下：

数据经过掩码后，基本不会再出现大面积的黑块和白块，利于扫描。

掩码只会与数据区进行 XOR，不会影响功能区。

代码概览

只要遵循以上二维码的规范，生成对应的二维码图形即可，具体实现逻辑不影响。这里我们参考jquery-qrcode，简单看下实现，主要流程如下：

makeImpl : function(test, maskPattern) {this.moduleCount = this.typeNumber * 4 + 17;this.modules = new Array(this.moduleCount);for (var row = 0; row < this.moduleCount; row++) {this.modules[row] = new Array(this.moduleCount);for (var col = 0; col < this.moduleCount; col++) {this.modules[row][col] = null;//(col + row) % 3;}}this.setupPositionProbePattern(0, 0);// 位置探测图形this.setupPositionProbePattern(this.moduleCount - 7, 0);// 位置探测图形this.setupPositionProbePattern(0, this.moduleCount - 7);// 位置探测图形this.setupPositionAdjustPattern(); // 校正图形this.setupTimingPattern(); // 定位图形（坐标轴）this.setupTypeInfo(test, maskPattern); // 版本信息if (this.typeNumber >= 7) {this.setupTypeNumber(test);}if (this.dataCache == null) {this.dataCache = QRCode.createData(this.typeNumber, this.errorCorrectLevel, this.dataList); // 生成数据}this.mapData(this.dataCache, maskPattern); // 加入掩码},

生成二维数据后，再把点一一绘制出来即可：

var createCanvas  = function(){// create the qrcode itselfvar qrcode  = new QRCode(options.typeNumber, options.correctLevel);qrcode.addData(options.text);qrcode.make();// create canvas elementvar canvas  = document.createElement('canvas');canvas.width  = options.width;canvas.height = options.height;var ctx   = canvas.getContext('2d');// compute tileW/tileH based on options.width/options.heightvar tileW = options.width  / qrcode.getModuleCount();var tileH = options.height / qrcode.getModuleCount();// draw in the canvasfor( var row = 0; row < qrcode.getModuleCount(); row++ ){for( var col = 0; col < qrcode.getModuleCount(); col++ ){ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));var h = (Math.ceil((row+1)*tileH) - Math.floor(row*tileH));ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);  } }// return just built canvasreturn canvas;}

艺术二维码

日常我们见到的二维码都是黑白的，但其实二维码可以多姿多彩。

这里有很多样式，可以试一试https://qrbtf.com/。

二维码之所以可以五颜六色，是因为二维码的有用信息只是 0 和 1，至于 0 和 1 用什么信息表达，只要扫码软件可以识别就行。目前的扫码软件一般都是对图片进行灰度处理，所以二维码上的点无论如何表达，只要经过灰度处理后 0 和 1 没有颠倒，则信息不会出错，不会影响扫码结果。

艺术二维码实现起来也不难，只要区分特定的数据区，并用特定的图片渲染即可，有兴趣可以参考https://github.com/252860883/ArtQRCode。

更简单一点的，也可以直接降低黑白透明度，背景渲染特定的图片；如果只是网页上显示，还可以做成 gif 动图形式。

不过，艺术二维码由于颜色更丰富干扰信息更多，因此相比黑白二维码，艺术二维码对扫描软件的要求也更高。

小程序码

小程序码和二维码虽然看起来完全不一样，但是它们的设计思想及生成流程是基本一样的。

具有位置探测图形；
支持3种容量：36 射线、54 射线和 72 射线；
具有 L、M、Q、H 4种容错级别；
掩码操作均匀0、1码点；

ps：了解二维码的原理后，其实我们自己也可以手画二维码。发散一下，求婚啥的，用红玫瑰和白玫瑰摆个二维码，女朋友扫码出来一看写着“Marry Me！”，哈哈哈哈岂不是有点程序员的浪漫