二维码美化

给二维码加 logo、分开配前景和三个定位眼的颜色,数据模块还能做成圆点或圆角。每改一次都会在本地重新扫一遍,扫不出来直接告诉你原因。

纠错级别

高(容错 30%,加 logo 建议用这档)。加 logo 时请用高档,logo 盖住的模块只能靠纠错码补回来。

模块画成小圆角方块,风格柔和,像素小的时候圆角几乎看不出来。

当前对比度 5.47:1。低于 3:1 基本扫不出来,3 到 7 之间建议再拉开一点。

实际边长会取整到「模块数 × 每个模块的像素」,让模块边界落在整数像素上;非整数会在相邻模块之间留下半像素的灰边,扫描器二值化时容易判错。

logo 图片(可选,透明底 PNG 最好)
填好内容后自动生成

二维码是怎么排出来的

二维码把数据编成一格一格的模块,四周是三个定位眼,中间还夹着校正图形和时间图案。编码时先按内容和纠错级别定出版本(版本 1 是每边 21 个模块,每高一版多 4 个),再把数据切成码字、算出 Reed-Solomon 纠错码一起排进去,最后选一个掩模图案把大片同色区域打散——掩模的目的就是让模块分布更均匀,扫描器才容易分辨。美化只能在「知道哪个模块是什么」的前提下做,所以这一页先用编码库拿到模块矩阵,再自己按模块绘制。

三个定位眼必须保持标准结构:7 格实心、抠掉 5 格、再留 3 格实心,扫描器靠这个同心比例在画面里找码、定方向和推算网格间距。所以圆点和圆角只作用在数据模块上,定位眼永远是方的(圆角样式下只把外角修圆一点)。这也是所有专业美化工具的共同做法,不是这一页的保守。

加 logo 本质上是有意损坏二维码,靠纠错码补回来。高档能容错约 30%,中档只有 15%,而 logo 连同它底下的背景垫色会一起盖住模块,所以用 H 档、logo 占宽控制在两成以内是有依据的经验值。校验这一步读的就是画出来的最终像素,所以连「logo 垫色盖掉了一圈」这种间接影响也能被发现。

对比度按 WCAG 的相对亮度算,纯黑配纯白是 21:1,低于 3:1 时扫描器的灰度二值化切不出黑白模块,基本读不出来。另外几个容易忽略的边界:静区标准要求 4 个模块,少了扫描器会把码外的文字和边框当成码的一部分;模块的像素数必须是整数,非整数会让相邻模块之间出现半像素灰边;内容越长版本越高、模块越小,圆点和圆角的效果越看不出来,反而更难扫。要生成不带美化的标准码用二维码生成;想把现成的码读回内容、或者一次认多个码,用二维码识别与解码。

常见问题

改完颜色和形状之后怎么知道自己还能不能扫?

每次改动都会把画出来的图取回像素,交给本机的识别库重新扫一遍,结果就显示在预览下面。这一页最有用的就是这一步:美化本质上是拿可扫性换好看,颜色调浅、模块变细、logo 变大,每一样都可能让码失效,与其打印出来拿手机试,不如先在本地验一遍。校验通过时还会比对读出来的内容和输入是否一致。

为什么圆点模式下三个角的定位眼还是方的?

因为定位眼是扫描器用来找码、定方向和推算网格的,形状必须严格符合标准:7 格实心、抠掉 5 格、再留 3 格实心的同心结构。把定位眼也变成一串圆点,扫描器就认不出定位图案,整个码直接失效。所以圆点和圆角只作用在数据模块上,定位眼始终保持标准结构,这也是所有专业美化工具的做法。

加了 logo 之后纠错档该怎么选?

选高档(H)。纠错码是 Reed-Solomon,能补回约 30% 的损坏,logo 盖掉的那一块就是靠它补的,而且 logo 周围的白色垫底也会额外遮掉一圈模块。用中档只有 15% 的余量,logo 稍微大一点就补不回来了——表现就是有的手机能扫、有的扫不出,最难排查。logo 宽度建议控制在整个码的两成以内。

前景和背景的对比度要到多少?

本地按 WCAG 的相对亮度算对比度,低于 3:1 基本扫不出来,3 到 7 之间属于「屏幕上看还行,打印或光线不好时容易失败」,7:1 以上比较稳。纯黑配纯白是 21:1。除了对比度,还要注意别用太接近的色相:红色配绿色在灰度上可能差很多,但在某些扫描器的灰度化算法里会一起变暗。

反色二维码(浅色模块配深色底)能用吗?

新一代扫描器(包括这一页用来校验的识别库)都会额外试一次反色,所以能认出来。但老设备和部分工业扫码枪只认深色模块配浅色底,扫码场所有闸机、门禁、扫码枪这类硬件时,别冒这个险。校验结果里如果提示反色,就说明本地能读,但换设备有风险。

静区为什么不能省?

静区就是码四周那圈空白,标准要求至少 4 个模块宽。扫描器是先在画面里找定位图案、再推边界,四周没有留白时,码外面的文字、边框、别的图案会被当成码的一部分,边界一算错,整个网格就偏了。往海报上贴码的时候,别把码压到离别的元素只剩一两个模块的位置。

内容写多少合适?版本高了好看得出来吗?

版本从 1 到 40,每高一版每边多 4 个模块。同样一张图,内容越长模块越小,圆点和圆角的视觉差别越看不出来,反而每一格更小更难识别。想看得到美化效果,内容尽量短(短网址、几个字),版本控制在十以内,把省下来的模块留给形状和颜色。

这一页能生成普通二维码吗,或者把美化过的码再读回来?

能。不加 logo、不调颜色、样式保持方块,就是一张标准二维码,可以直接下载用。想把别人给的二维码读回内容,用二维码识别与解码那一页,它能同时认多个码、把 Wi-Fi 串和 vCard 名片拆成字段,还能画定位框;纯文本的快速生成用二维码那一页。

相关:二维码识别与解码二维码生成