Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
翻译已得到原作者（Marien Raat）授权，原文发表在 Marien Raat 的博客上（链接）。
让我们看看如何在不让链接失效的前提下随心所欲地更改二维码的外观。我们还会展示世界上第一个（据我所知）可以正常使用的动态二维码。
来 My-QR.art 看看效果怎么样吧！
二维码是将现实世界和数字世界连通的一种简单可行的方式。每当我看到一个二维码，我都会想扫一扫，看看它后面隐藏了什么东西，二维码就是这样让我着迷。但是二维码看起来总是千篇一律，有没有什么办法能让他们看起来更炫酷一点呢？比如说，能不能把二维码做成某个特定的形状，或者做成像素画的样子呢？
人们已经利用了（或者说是滥用了）二维码的纠错功能来在二维码中添加他们的 logo：他们只需把自己的 logo 放在二维码的一部分上，并让纠错功能处理丢失的数据就好了。然而，如果你想用这种方式来修改二维码，你最多只能遮挡 30%（实际来讲通常会比这个数值小很多）的二维码面积。换个思路想的话，既然二维码本质上就是数据的一种可视化形式，我们能不能换一种角度来看这个问题呢？比如说，我们不去思考如何设计二维码来让它适合我们的数据，而是让数据适合我们的二维码，这样可不可以呢？
先上结论：完全可以。看看 My-QR.art 就知道了。所有的代码都完全公开，当然也欢迎 来 GitHub 提交代码。
比如说，我们想要给我们的网站做一个推广。而且，我们现在正好有一个我们网站的黑白 logo。我们要做的就是去做一个引人注意的二维码，让它长得像我们网站的 logo。
当然，二维码所指向的网址我们也有，比如说这个：https://my-qr.art。
我们已经设置好了一台服务器，用来重定向特定的链接。这样之后，我们可以把二维码头部的数据设置成指向那台服务器的链接，于是二维码后面所表示的数据就可以由我们自己来定义了。因此，我们就可以自由设计这部分数据，来让二维码符合我们的设计了！
举个例子吧：二维码所指向的网址是 https://my-qr.art/r/是什么都无所谓的一段超长字符串 ，在服务器后端我们可以告诉服务器，将任何指向 https://my-qr.art/r/是什么都无所谓的一段超长字符串 这个网址的请求都重定向到 https://my-qr.art 这里。于是，我们这就做好了一个能够正常使用的二维码：它既可以将我们带往指定的网址，同时又能对二维码的外观进行更多的自定义！多达 80% 的代码都可以用这种方式来编辑。
这些都搞定之后，就算是想做动态二维码也不在话下。我们可以独立制作每一帧，并让它们都重定向到同一个页面上。确实，打印出来的二维码占多数，所以动态二维码可能没什么意义，但它们看起来真的很酷！为了让你在接下来的阅读中不至于昏昏欲睡，先给你看一个世界上（据我所知）第一个可以正常工作的动态二维码：
我们既然知道了思路，那就开始着手做吧。但首先，我们要弄清楚二维码的工作原理是什么样的。
二维码使其中的一部分方块变黑，一部分方块变白，以此来编码数据。这之后，二维码扫描器通过识别这些黑色和白色的小方块就可以复原其信息。二维码的尺寸多种多样，从版本 1（非常小，17×17）到版本 40（非常大，177 × 177），共有 40 种之多。二维码中黑白的小方块叫做「模块」，每一个模块都有以下这四种功能之一：
在我们的计划中，用户可以决定所有实行功能 3 的模块的颜色。于是，第一点要做的就是让用户知道，在他们选定尺寸的二维码中，哪些像素用户可以控制，哪些不可以。我们先创建一个模板，让实行功能 3 的模块呈现白色，而其他模块全都呈现灰色。
这样，我们就可以自行为其他模块和纠错数据填充颜色了。为了做到这一步，你需要深入了解二维码的工作原理。我们需要考虑数据编码、数据交错（interleaving）、额外的识别点（extra eyes）、纠错信息（error words）等等。同时，我们也要考虑到我们需要为我们的链接预留前面的几个字符。
幸运的是，互联网上有这么一个很棒的资源：Thonky.com 提供的二维码教程。在一个版本 30 的二维码上处理了这些事情之后，我们就会得到这样的一张图片。
现在我们来解决另一个问题：在用户在我们的模板上绘制了他自己的设计之后，我们要如何将其转换成可用的二维码？二维码有四种可用的编码类型：数字、字母数字、二进制和汉字。我们需要用编码来创建链接，所以数字和汉字这两种是不行的。其次，我们需要使链接结尾的随机字符串足够正常，这样二维码扫描器才会将我们的代码识别为一个链接。二进制编码方式通常会产生一些不会出现在链接中的字符组合（比如说「\0」），这就会导致许多二维码扫描器不会将其作为链接打开。
幸运的是，字母数字编码方式刚刚好有足够的字符来让我们创建可用的链接（尽管生成的字母只能是大写的）。
弄明白这一点之后，我们来读取用户的设计吧。首先我们需要从设计中的所有数据模块中提取一个位串（bit string）。对于较小的二维码来说这一过程相当直接；只需要像 Thonky 提供的上图一样，从上到下，从右到左以蛇形方式读取即可。但是对于尺寸大于 5 的二维码来说，我们就要考虑到数据交错的问题了。在尺寸大于 5 的二维码中，数据信息散布在二维码的各处，也许这样做是为了让数据样式更加随机。所以，我们需要将这个交错程序逆转过来。
幸运的是，Thonky.com 对于这一点也同样进行了解释。最后我们从我们的设计中提取出一个长达 13863 位长的位串，现在我们只展示前 80 个字符：
01100011010101001100101010001100011110111010100000000001110100111110011101001001
现在，我们需要将位串解码，使其变成一个字母数字串。我们按照每 11 位一组的方式对位串进行分组，并且按照 这个表 来将其转化成 2 个字母/数字字符。我们得到的结果就是下面这样（同样是部分）：
KS$#LKAHRDF9H8XQI9AL HRD$OIWHSRE94QX95IFR*IK9HF/ 5NM+/AMIA99LB I5R II98ULR JRD/AR1 IRG8...
我们把前 20 位换成我们的链接前缀，之后就会得到：
HTTPS://MY-QR.ART/R/ HRD$OIWHSRE94QX95IFR*IK9HF/ 5NM+/AMIA99LB I5R II98ULR JRD/AR1 IRG8...
现在我们可以随便用个二维码库来生成二维码了！二维码库会帮我们处理纠错码以及其他无聊的部分。
但怎么生成了这样的东西？这看起来也不像图像呀？问题出在遮罩上。二维码规格中有五种不同的遮罩，其中这种使我们的二维码看起来最为随机化的是选择好的，为了让二维码扫描器更易阅读。但这肯定不是我们想要的效果。但是，以我的经验来说，扫描器扫描这些不随机的数据也没什么问题，所以即便把二维码库设置为总使用同一种遮罩，我们也不必太担心。我们先给我们的设计应用相同的遮罩，再进行处理，我们终于得到了我们想要的图像。
现在我们要将二维码重定向到正确的域名上。这按理来说很简单：只要把二维码的网址放在数据库中，然后链接到重定向的网址就行了。当我们收到请求时，只需要在数据库中查找相应的网址即可。然而，如果我们想用现代的网络服务器，我们就还得兜几个圈子。Apache 不喜欢我们生成的大多数链接，因为它们看起来都不像正常的链接（这就不好玩了是不是，Apache？）。于是我们会收到一条错误信息：Error 400: Bad request。而且，似乎我们还没办法把这条错误信息关掉。
但幸运的是，有一个变通的办法：我们可以为我们的 Error 400 页面设置一个自定义的错误页面，所以如果我们把重定向页面设置为 Error 400 的错误页面，就搞定了！幸亏 Apache 没有扫兴到在处理 Bad Request 时再给我们一个 Bad Request 错误……
我的后端用的是 Django，处理这些乱七八糟的链接时，它还会出现另一个令人哭笑不得的 bug：它会尝试将链接作为一个 ISO-8859-1 的字符串来解码，但是 Apache 传过来的字符中有些不在 ISO-8859-1 中。这时，我们就需要我们自己的 WSGI 处理程序来解决这个问题了：具体看这里。但现在所有问题总算是解决了，扫一扫我们创作的二维码，它成功地重定向到了我们想要的地方！
不过还是有一个小小的注意事项需要说明：二维码本身是标准化的，我们创建的是标准的二维码，其中包含正确的链接；但是二维码扫描器未必是标准化的，也就是说有的可能会将我们的二维码识别为文本，而不是链接。
因为处理图像什么的对用户来说不怎么友好，所以我用 Django 做了个网页应用，在 My-QR.art 这里。你可以使用这个易于上手的 编辑器 来画、填充、或者上传黑白图片来创建你自己的二维码。同时，它也有一些我们做的解释和重定向代码。项目本身完全免费开源，可以来 GitHub 主页 查看详细信息。
终于可以依据我们的意愿创建二维码了，怎一个爽字了得！快去 My-QR.art 创建你自己的二维码，或者去 GitHub 主页 查看代码。觉得这个项目很酷，想要助力吗？和你的家人、朋友们分享这篇博客，网站，去 GitHub 上为这个项目打星标，都可以。如果您手头阔绰，若是能用网页下方的捐赠按钮表一份心意也是极好的，毕竟运营 My-QR.art 这个网站可不是免费的。同时，如果你用 My-QR.art 做出了酷炫的二维码，也欢迎 通过邮件 与我分享。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。