制作二维码：深入探索二维码艺术 (2024)

# QR码艺术创作：深度解析与实践探索 原文链接：https://kylezhe.ng/writes/crafting-qr-codes ## QR码艺术深度解析 2024年9月27日发布 - 2026年6月13日更新 --- 没有人会特意去扫描二维码，但它们却已遍布全球——因为这是分享URL最直观的方式。在标识、广告和各类包装上，只要留心观察，就会发现它们无处不在。 当然，普通的黑白二维码只是冰山一角。 许多人希望二维码更具个性化并符合品牌形象，通常的做法是在中间添加徽标。这是可行的，因为二维码与CD、DVD类似，采用Reed-Solomon纠错编码技术来恢复损坏信息。 虽然有些设计很有品味，但大多数做法都很草率，效果不佳。 mcdonalds appuber adduolingo profileinstagram profile 二维码通常显示得很小，而难以辨认的徽标更是常见问题。此外，更高的纠错率需要更密集的编码和更小的像素。如果不小心，最终得到的二维码既不美观又无法扫描。 那么，是否存在一种方法来制作既美观又可扫描的二维码呢？ 是的，这正是本文要探讨的内容。 ## 艺术二维码的技术图谱 首先，让我们了解一下有哪些可能的实现方式。 许多人将照片融入整个二维码。但在图像质量和实用性之间确实存在权衡。 为了追求最大化的艺术效果，设计师可以手工设计完全定制的二维码。 也有AI生成的方法。我推荐阅读创作者的博客文章(https://latentcat.com/en/blog/qrcode-controlnet)以及《Stable Diffusion QR Code 101》(https://antfu.me/posts/ai-qrcode-101)。我将省略示例，用一首诗代替： > 我不会用这些疲惫的图片 > 再给网络世界增添负担 > 在这巴别塔式的图画之书 > 这里没有荣耀可言 > *她有着十三根手指* > 动漫女孩 丰满胸部 古罗马 一个有趣的方向是改变黑白方块的渲染方式。 我深受启发，自己编写了一些代码。 stained glassphysicswhiteboard markerneon signlayered patternsbathroom tilebenday dotsabstract art 我制作的设计工具可在qrframe.kylezhe.ng (https://qrframe.kylezhe.ng/)上访问。它提供了多种预设，可以轻松修改或通过Javascript从头创建新样式。 通过这些示例，你已经了解了多种技术方法。其中一些可能会让用户困惑，有些可能无法与现代智能手机相机应用兼容。 要真正理解在何处以及为何可以进行创意发挥，我们必须首先了解二维码的结构和扫描原理。 ## 二维码结构解析 制作艺术二维码需要记住的关键点：**定位图案必须保持正确形状**，而二维码的其他部分只需在正确位置保持足够的明暗对比。 这占了80%的要点，但遗憾的是，还有一个重要问题需要解决。 ## 便捷性的代价 你能看出我用粉笔绘制的这些二维码有什么问题吗？ bad qr code stencil第一次尝试（效果糟糕） slightly better qr code stencil第二次尝试（仍然无法扫描） 第一个看起来有些怪异，但我确实很困惑为什么第二次尝试仍然失败。 多功能扫描器（如智能手机默认相机应用）必须在尝试扫描前先检测到二维码。与始终处于激活状态的简单扫描器相比，智能手机对可识别的内容要求更高。它必须在设备计算机视觉模型这个"黑盒子"中看起来"像一个二维码"。 经验法则是使用**纯色且高对比度的颜色**，同时保持深浅像素的良好平衡，但最终仍需用真实设备进行测试。 基于这一点，让我们了解人们如何通过程序化方式成功创建艺术二维码。 ## 将图像转换为二维码像素 ### 叠加数据像素 mike wazowski amzing qr code使用Amazing-QR (https://github.com/x-hw/amazing-qr)创建 最简单的方法是在每个像素中心放置圆点。通常，圆点至少达到像素宽度和高度的1/3就足以正确解码。 mike wazowski visualead qr code使用Visualead (https://github.com/x-hw/amazing-qr)创建 除了中心圆点，你还可以部分调整每个像素的整体明暗度。 通过缩小图像或使用像素艺术，中心圆点可以巧妙地隐藏起来。抖动处理和限制调色板（量化）都会增加噪声，从而提供更好的伪装效果。 我见过的最独特技术涉及生成词云。在这种情况下，叠加圆点被用作驱动文本变形算法的中间步骤。 向动画转换很简单，因为可以在每帧上绘制相同的点叠加层。不过这个示例会随时间变化显示歌词。 ## 将二维码像素转换为图像 ### 利用纠错机制 占用纠错容量显然不是理想方案，而且空间效率也不高。每增加两个纠错字节，纠错容量只增加一个字节。当然，部分容量必须保留用于实际扫描错误，因此可绘制区域相当有限。 好处在于纠错过程可以在未知位置修复错误，但如果我们知道想要修改的位置呢？ ### 利用填充区域 二维码的数据由消息字节及其对应的纠错字节组成。消息的任何部分都可以自由设置，但更改消息会改变二维码的用途。 幸运的是，短消息会被填充以占满容量，而且填充内容可以自由设置而不改变解码内容。 ### 通过填充实现固定纠错 既然纠错数据是从消息计算出来的，有没有办法根据期望的纠错值来计算消息？是的，因为Reed-Solomon码是最大距离可分（MDS）码。我们可以求解线性方程组，找到能产生特定纠错字节的填充值。 mike wazowski qart code使用QArt Coder (https://research.swtch.com/qr/draw)创建 URL可以包含像`test.com#anchor`这样的锚点。通常这会滚动到页面的特定部分，但无效的锚点会被忽略。通过添加锚点操作像素的数学原理在QArt Codes (https://research.swtch.com/qart)中有介绍。 mike wazowski my qr art code使用MY-QR.ART (https://my-qr.art/)创建 这个网站允许你绘制期望的输出数据，这些数据可以直接解释为输入文本的一部分。文本前半部分是链接重定向服务的URL，后续随机字符充当唯一键。详情请参阅《Hacking QR code design》(https://marienraat.nl/hacking-qr-codes.html)。 mike wazowski qr picture使用QRpicture (https://qrpicture.com/)创建 这里数据像素匹配图像，但它们不是解码消息的一部分。换句话说，它们改变的是填充字节。参见他们的HN帖子(https://xyzzy.github.io/2020/08/20/Show-HN-Photo-Realistic-QR-Codes.html)。（这种填充操作方法首次在《Design QR Code中可显示图像区域的扩展及其应用, 2011》中描述(https://www.ieice.org/publications/conferences/summary.php?id=FIT0000009019&expandable=2&ConfCd=F&session_num=4V&lecture_number=O-006&year=2011&conf_type=F)。） 至于动画，逆向工程每个"帧"的数据会更繁琐，而且二维码很可能无法扫描。参见他们的幕后视频(https://www.youtube.com/watch?v=R4p2OcRmTg4)了解他们的处理方法。 我最终制作了自己的逆向工程版Bad Apple动画，目标是使其在实时扫描时仍有一定可读性。添加噪声图案能大大提高检测成功率。源代码是`fuqr` (https://github.com/zhengkyl/fuqr)中的一个示例。 ## 非图像技术 由于这类示例不多，我将展示自己的作品并分享思考。 虽然每个独特设计都会面临独特挑战，但希望这些示例能为你提供一些思路。 ### 模仿借鉴 优秀艺术家模仿。许多手工设计都可以用代码实现。这里Douglas Coupland将2x2的黑白方块替换为相应的深色或浅色方块。这不仅易于编码，还展示了一种常见策略：用更大的设计元素替换*像素组*。更多示例请参见《Vancouver Codes (2012)》(https://www.youtube.com/watch?v=iX7iGd36NEg)。 伟大艺术家借鉴。原设计很精致，但并非所有闪闪发光的东西都是可扫描的二维码。当扫描失败时，经验告诉我们需要**纯色**和**高对比度**。我选择增加点大小和密度，特别是定位图案，并在点之间填充深色阴影。这虽然不太美观，但却是必要的妥协。 优秀程序员借鉴代码。这种二维码样式选项，连同许多其他选项，可在MIT许可证的`react-qrbtf` (https://github.com/CPunisher/react-qrbtf)代码库中找到。基于现有代码构建新设计是个好方法，所以也欢迎使用`qrframe` (https://github.com/zhengkyl/qrframe)代码库中的我的代码。你承受的心理负担就当是成本吧。 ### 亲身实践 badly drawing qr code with chalk人类失败的尝试 当然，我不得不数字化创作现实中未完成的作品。借助`roughjs` (https://roughjs.com/)，制作手绘风格SVG相当简单。通过调整填充和粗糙度参数，我真正理解了不可检测与可靠扫描之间的界限。我的手绘尝试差距甚远。我再怎么强调**纯色**和**高对比度**的重要性都不为过。 elephant mosaic梵蒂冈博物馆内的马赛克 接触各类艺术可能是最佳创意源泉。这个设计相当简单，但效果却如大象般强大。如果这里有什么教训，那就是规则本应被尊重地打破。你可以修改定位图案，但注意其中两个图案完全保留了十字形状。 waves on a rocky beach地中海 animated waves qr code使用fuqr (https://github.com/zhengkyl/fuqr)创建 动画通常是个糟糕的选择，因为你需要每一帧都可扫描。但大海的召唤令人难以抗拒。在这个示例中，每个像素只在尺度上变化，而且每个像素的中心1/3始终是正确的颜色，就像点叠加技术那样。这就是最终的启示：所有这些技术并非互斥。 恭喜，你现在对二维码了解太多了！ ## 感谢阅读！ 希望你学到了一些有趣的知识，即使它不实用。 如果你想设计二维码，又不害怕写点代码，不妨试试qrframe.kylezhe.ng (https://qrframe.kylezhe.ng/)。 编辑器和渲染源代码在`qrframe` (https://github.com/zhengkyl/qrframe)代码库中，而驱动它的Rust编写的二维码生成器在`fuqr` (https://github.com/zhengkyl/fuqr)代码库中。 只要尝试你就能做到，但你的时间也很宝贵。 再见！ ## 随想杂谈 这里有一些我不得不一吐为快的二维码想法。 1. **存在很多编码模式，实际上只有4种，而真正常用的只有1种。** - 二维码标准并未反映现实。我确信存在符合标准的生成器和扫描器，可能在日本某些仍在使用传真机和寻呼机的企业遗留系统中。 - 支持字母数字和数字模式是因为它们实现简单，但没人实际使用。 - 没有人支持结构化附加、ECI和FNC1等扩展编码模式。 - 没有人支持汉字模式 - 没有人假设字节模式是ISO 8859-1 - 大家都默认使用UTF-8。这对ASCII（所有URL）相同，且是大多数系统的默认编码。 2. **掩码选择步骤非常随意。** - 通过评分选择最佳掩码，但评分条件是任意的，实际上所有8种掩码都能正常工作。 - 这个迭代步骤详解展示了第7步和第8步。选择最差掩码看看是否重要。 - https://www.nayuki.io/page/creating-a-qr-code-step-by-step 3. 专有可扫描代码有点滑稽。TikTok、Snapchat和Instagram已经用风格化二维码替换了他们的自定义代码（分别是TikCode、Snapcode、Nametag）。four proprietary scan codes 4. 以下是我珍藏的链接。 - https://www.thonky.com/qr-code-tutorial是很好的资源，帮助我理解纠错数学原理。 - segno (https://github.com/heuer/segno)可能是唯一支持汉字模式的二维码生成器。 - 我发现了两个二维码艺术3D画廊。如果我有一毛钱... - https://www.qrmosaics.art/3d-gallery - https://www.ineoscan.com/qrcodefactory1 - QRazyBox (https://merri.cx/qrazybox/)是一个超酷的二维码恢复工具，我用它解码了这本书的封面，并找到了2011年的原始素材图(https://www.istockphoto.com/vector/qr-code-gm156283521-15512938)。qr code on book cover