2. 特别目录

本文是该系列文章的第四篇。总目录如下：

《IM扫码登录技术专题（一）：微信扫码登录功能技术原理调试分析》

《IM扫码登录技术专题（二）：市场主流扫码登录技术原理调试分析》

《IM扫码登录技术专题（三）：通俗易懂，一篇文章就够了IM扫码登录功能详细原理》

《IM扫码登录技术专题（四）：你真的懂二维码吗？》在一篇文章中深入了解并掌握它！ “（* 本文）

推荐：另一篇文章《难得有用的资料，揭示优化支付宝二维码扫描技术的实用路径》可以一起阅读。

三、二维码的由来

准确的说，我们最常看到的二维码其实就是二维码，也是目前我国使用最广泛的二维码。为了简单起见，除非另有说明，本文提到的二维码均指QR码。

3.1 历史背景

20世纪60年代后，日本经济迎来高速增长时期，商品种类繁多的超市开始出现在城市中。

当时，超市使用的收银机需要手动输入产品价格，因此负责收银的人员经常出现手腕麻木和“腱鞘炎”的症状。

“我们能减轻超市收银员的负担吗？”

条形码的出现解决了这个问题。由于POS系统的开发成功，只需通过光传感器读取条形码，价格就会自动显示在柜员上，并且读取的商品信息也可以传输到计算机。

结果，条形码变得流行，但新的问题也出现了。问题在于条形码的容量有限，英文数字最多只能容纳20个字符。

“如果编码本身能包含更多的信息就好了”、“希望它具有汉字和假名的处理功能”。

当时从事条形码阅读器开发的Wave公司（日本电装株式会社（日本电装株式会社）的子公司）了解这样的需求。在此背景下，研发团队怀着“必须满足客户需求”的愿望，投入了新型二维码的研发。

3.2 研发2人团队

“当时其他公司开发的二维码侧重于融入信息，”当时负责二维码开发的滕宏源（原）回忆当年的情景时说。

▲ 上图中的“怪叔叔”就是滕宏远（Hara）

条形码只能水平（一维）存储信息，而QR码可以垂直和水平二维存储信息。滕宏源的考虑是，除了能够容纳大量信息外，“开发出来的代码还应该易于阅读”。因此，他投资了新二维码的研发。研发团队只有两个人。

3.3 技术难点

滕宏源（Hara）研发团队面临的最大技术难题是如何实现高速读取。

有一天，滕宏远的脑海里浮现出一个想法：“如果附上‘这里有密码’这样的位置信息会怎么样？”

那么想到的就是背部造型的“定位图案”。将此图形放入二维码中可以实现其他公司无法模仿的高速读取。

▲上图中三个角的背形图案就是“定位图案”

▲ “定位图案”中黑白块的比例为1:1:3:1:1

3.4 为什么“定位图案”的形状像回车符？

为什么我们需要使用该类型的字符作为定位图案？

滕宏源解释道：“因为这种图形在票据等中出现的频率最少。”

也就是说：如果附近有相同的图案，读者就会将其误认为是代码。为了防止这种误读，定位图案必须是唯一的图案。

经过综合考虑，滕宏源等人决定将广告传单、杂志、纸板等上印刷的所有图画、文字全部改为黑白，并对其面积比例进行彻底调查。

经过研发团队日夜调查无数印刷品，最终确定了印刷品中“最不常用的比例”，即1:1:3:1:1。

这样：定位图案的黑白部分的宽度比例就确定了。得到的结构是这样的，扫描线可以从360度扫描，无论从哪个方向扫描，一旦扫描到其独特的比例，就可以计算出代码的位置。

▲回形“定位图案”无论从哪个方向扫描都能正常识别

研发项目启动一年半后，几经周折，一个可容纳约7000个号码的二维码（准确地说是QR码）终于诞生了。其特点是可以处理汉字，容量大，读取速度比其他编码快10倍以上。

3.5 二维码专利费

既然二维码（准确地说是二维码）是由企业和个人研究完成的，那么今天它的专利费该如何收取呢？

据传闻，滕宏源是这样表示的：“这种技术其实用任何网络工具都可以实现，所以这么简单的事情我不会收取专利费。”

当然，以上只是传闻，未必属实。

事实上，Wave公司拥有QR码的专利权，可以向使用QR码的公司或个人收取专利费，但Wave公司已明确表示不会行使这项权利。这是研发开始时制定的政策，也体现了开发者的想法：“希望更多的人使用二维码。”

于是，免费、可以放心使用的二维码如今作为“公共码”在世界各地广泛使用。

4、二维码的优点

回到技术本身，我们首先从现代的角度总结一下二维码的优点。

在二维码出现之前，当需要类似的编码场景时，会使用一维码（条形码）。

然而，条形码携带的信息太少，只能在一些非常简单的场景中使用。因此，除了用于商品等信息之外，条形码并没有广泛普及。

总结起来，二维码有以下优点：

5. 初次认识二维码

我们可以先尝试生成一个二维码。演示地址为：。

如上图所示：可以发现二维码有4个变量项，其中主要的两个是版本和容错率。

1）版本（）：

共有40个尺寸，对应40个版本；它是一个21*21的矩形。每增加一个版本，大小就增加4，即(v-1)4+21，最高为一个正方形。

2）容错率（）：

二维码容错能力是指二维码图标被屏蔽后仍能被扫描到的能力。容错率越高，可以遮挡的二维码图像部分就越多。

QR 码有 4 个容错级别：

根据以上配置，相同内容在不同配置下会生成不同的二维码，但扫描到的内容是相同的。

6. 二难代码设计原则

我们每天看到的二维码是由黑白块混合在一起组成的图片。我们还要知道，这些黑白块是内容的某种编码，但实际上，除了内容之外，还有很多其他的二维码。其他有助于二维码识别的信息。

如上图所示，按照右侧标注的从上到下的顺序，分别是功能区和数据区。

6.1 色带区域

丝带的主要内容有：

位置检测图形的主要功能有：

在网上搜索二维码图片，可以观察到这些二维码都有位置检测图形、位置检测图形分隔符和定位图形。

第三张，定位图案不太对，确实扫描不出来：

6.2 数据区

数据区的主要内容有：

除去定位区域和格式信息，数据和纠错码字排列如下：

7.二维码生成流程

放置所有数据后，还需要执行一步：添加掩码。

遮蔽的主要目的是避免如果出现大面积的空白或黑色区域，给扫描和识别带来困难。

常用的口罩有以下几种：

数据屏蔽后，基本不会再出现大面积的黑白块，方便扫描。

注意：掩码只会与数据区进行异或，不会影响功能区。

8. 显示代码

只要按照上面的二维码规范，生成对应的二维码图形，具体的实现逻辑就不会受到影响。

这里我们参考-并简单看一下实现。

主要流程如下：

： （测试， ） {

这。 = 这个。 * 4 + 17；

这。 =（这个。）；

for( = 0; 行 < this.; 行++) {

这。[行] = (这。);

for( = 0; col < this.; col++) {

this.[row][col] = null;//(col + row) % 3;

this.(0, 0);//位置检测图形

this.(this. - 7, 0);//位置检测图形

this.(0, this. - 7);//位置检测图形

这。（）; // 修正图形

这。（）; // 定位图形（坐标轴）

这个。（测试，）； // 版本信息

如果（这个。>= 7）{

这个。（测试）；

if(this.== null) {

这。 = .(这个.,这个.,这个.); // 生成数据

这个。（这个。，）； //添加掩码

},

生成二维数据后，将点一一画出来即可：

变量=(){

// 这

var = new (., .);

。（。文本）;

。制作（）;

//

var = .('');

。 = .;

。 = .;

var ctx = .('2d');

// / 在 。/。

变量 = . / .();

变量 = . / .();

// 绘制在

for( = 0; 行 < .(); 行++ ){

for( = 0; col < .(); col++ ){

ctx。 = .(行, 列) ? 。 : .;

var w = (Math.ceil((col+1)*) - Math.(col*));

var h = (Math.ceil((row+1)*) - Math.(row*));

ctx.(数学.(列*),数学.(行*), w, h);

// 只是

;

9.艺术二维码

我们日常看到的二维码都是黑白的，但实际上，二维码可以是彩色的。

这里有很多风格可以尝试：

二维码之所以能够色彩缤纷，是因为二维码的有用信息只有0和1，至于用来表达0和1的信息，只需要通过扫码软件识别即可。目前的扫码软件一般都是对图像进行灰度处理，所以无论二维码上的点如何表达，只要灰度处理后0和1不颠倒，信息就不会出错，扫描结果也不会出错。做作的。 。

实现艺术二维码并不难。只需要区分特定的数据区域，并用特定的图片进行渲染即可。有兴趣的话可以参考：。

更简单的是，还可以直接降低黑白透明度，在背景中渲染特定的图片：

如果只是在网页上显示，也可以制作成gif动画（这里就不贴示例了）。

然而，艺术化的二维码色彩更丰富，干扰信息也更多。因此，与黑白二维码相比，艺术二维码对扫描软件也有更高的要求。

10.微信小程序代码

虽然小程序码和二维码看起来完全不同，但它们的设计思路和生成过程基本相同。

如上图所示，微信小程序代码的特点是：

题外话：了解了二维码的原理之后，我们就可以自己动手实际绘制二维码了。

11.一个有趣的问题：“二维码会用完吗？”

这个问题很简单，答案是：是的。

由于QR码的大小有限，因此QR码的数量也有限。

但要花很长很长的时间才能用完所有的二维码。 。 。

目前二维码有40个正式版本，从-40开始，最小为21*21，最大为177*177矩阵。

其中，以微信名片为例，其矩阵规格为37×37，微信支付码则为25×25矩阵规格。为了便于理解，我们使用正方形作为矩阵单位。

▲ 上图为微信名片（即37×37矩阵的二维码）

如何计算每个矩阵生成的二维码数量？

我们举个例子：

如上图所示，每个格子有两种颜色变化。一个四方形网格可以组合多少种形状？

答案是：一格两种颜色代表两种可能，两格代表四种可能，三格代表八种可能，四格代表十六种可能。因此，四个正方形网格可以组成2^4，共16个图形。

以此类推，以微信支付码为例：

每行有 25 个方格，总共有 25 列。排除用于定位的方格和冗余纠错方格后，还剩下478个方格。根据二进制，每个方格只有两种选择：黑色或白色，所以478个小方格理论上总共可以组合2^478个二维码。

即可以生成指定大小的二维码：

一个二维码。

你能尝试发音多少个？

按照疫情期间1400亿个二维码数量计算，假设微信一年将使用6000亿个二维码。微信需要多少年才能用完这个大小生成的二维码？

我们算一下：2^478/6000亿=1.301×10^132年（超过数十亿年）。

所以：虽然理论上二维码确实有用完的一天，但实际上这个时间已经很长了，我们现在不用想了！

12. 参考资料

[1]难得一见的资料，揭示优化支付宝二维码扫描技术的实践路径

[2]你每天扫描二维码，你知道它来自哪里吗？

[3]二维码，你真的懂吗？

[4]二维码会被人扫描吗？

[5]二维码的成功之路

[6]有趣的二维码