Discode 一种圆形二维编码

[7gugu]

前言

之前微信、抖音和支付宝都相继推出了各自的私有二维编码系统，感觉这种异形的二维编码系统真的是好有趣，不过经过查询后，感觉互联网上对于这种异形二维编码貌似没啥文章介绍其中的技术原理，因此自己琢磨着搞了一个简易版的圆形二维编码系统，希望可以通过这个 Demo 向大家分享一下这种异形的二维码究竟是如何被设计、编码以及解码。

编码截图

编码特性

1. 支持 30Bit data
2. 支持 a-z, A-Z, 0-9, "@", "." 总共 64 种字符
3. 中心支持自定义 Logo

TODO

• 支持旋转矫正
• 支持纠错码

Demo 目录

目前这个 Demo 一共包含了四个部分，第一、二部分的博文主要是从设计者的角度分享了我对于异形二维码的思考以及如何设计一个编码字典；第三部分主要是通过博文概要的说明了其中的技术原理；第四部份则是代码 Demo ，其中包含了一个可以生成 Discode 编码的页面以及一个用于识别该编码的网页。

1. [Discode] 为啥要设计新的二维码系统?
2. [Discode] 设计 Discode
3. [Discode] 生成 & 识别 Discode
4. Github 代码仓库

联系方式

• Email: [email protected]
• Blog: https://7gugu.com

最后

如果可以得到大家的 Star 将不胜感激。如果有其他想法，也欢迎在评论区中和善的分享你的 idea ，希望大家能够喜欢这个项目。

[airyland]

感谢，学习了

[bangbo]

感谢分享，又长知识了

[duke807]

设计东西不是打补丁

重要的东西一开始就要全部包含，并充分考虑扩展性

没有纠错码，连 - 这个字符都不支持

等要加纠错码，以及要增加字符的时候，你设计的这套规范，又要全部打破重新设计

[showonder]

感谢分享详细的设计思路。不过要具备推广实用性，复杂的环境还是要考虑的，需要很强容错、纠错，让用户去遵守规范的事只能在自由体系内玩，几乎不可能跳出体系应用

[7gugu]

@duke807 做这个的初衷其实更多是为了了解这种异形二维码的技术原理，拓展性优先级不高。我的初始目标也仅仅是需要能够存下我的域名和邮箱即可。

[kylebing]

这种码容错率太低，一变形就扫不出来了。

[7gugu]

@showonder 这个我的思考是这样子的，私有编码的核心目的就是框死用户在自己的体系里，强迫用户遵照自己的设计去使用这个二维码，压根就没想过推广。比如微信码、抖音码、支付宝码，甚至是 Apple 的 AppClips 码也是这样子的设计思路。其中 Apple 的 Clips 码是最突出的代表，根本不考虑是否支持旋转矫正是否需要纠错，反倒是让用户去自己解决识别问题，识别不到你就换个方向识别，二维码上有污渍就换一个新的二维码。

[7gugu]

@kylebing 对的，不过压根不考虑变形的问题，强迫用户不放在曲面就好了 XD

[qzwmjv]

二维码本来就是带纠错的，这种圆形只是牺牲了一部分信息

[isaced]

感谢分享，学习了

[7gugu]

@qzwmjv 准确的来说是跟编码规则有关系，比如 QRCode 的编码规则就是包含了纠错的部分，我在设计的这种编码规则就是完全不支持纠错的

[SleepyRaven]

歪个楼，例图有点像宝可梦里的蚊香君😂

[AaronHsiung]

支持一下，感谢分享。 我最早是在 facebook 里看到过类似的圆形码。

[showonder]

@7gugu 所以 Apple 的 Clips 码感觉会搞不起来，不能指望用户那么容易服从教育和不关注成本，这个很适合 UI 中显示，比较容易标准规范地呈现，但不太适合线下场景，小程序码这种线下使用比较多的还是有旋转矫正的

[qzwmjv]

@7gugu QRCode 用的 solomon 编码，你不带纠错的话实用性会很低，因为不能保证显示、扫描、解码中不出错

[7gugu]

@showonder 不完全是的，这里 clips 码流行不起的核心原因是因为 AppClips 的门槛高导致的，开发商必须先有 App 才能有 Clips ，而不是小程序的人人都能有 Clips 。你可以在 Youtube 上搜一下台湾的 AppClips 应用，已经有很多线下商户应用这个能力，足以证明用户使用并不是大问题。

[showonder]

@7gugu 对的，AppClips 基本都是高质量商户，对商户本身的物料管理能力有不低的要求，这类方案还是很难取得网络效应的。但 OP 您的工作确实对进一步探索很有启发

[7gugu]

@qzwmjv 对的，不过初衷也是用来探索如何生成这样子异形二维码，实用性和拓展性如上所述，并不是优先被考虑的，所以这个项目我也只是称作 Demo ，真正实用至少还要完成 TODO 剩余的工作才行。不过碍于工作的原因，我其实也没太多时间在这个上面投入，就先这么放着吧。

[54xavier]

歪个楼：AppClips 在国内做不起来感觉和微信、支付宝小程序在国内比较流行也有一定的关系，微信、支付宝小程序同时支持安卓和 ios ，而 AppClips 仅支持 ios ，为了 ios 用户特地去开发个 AppClips ，还不如一套代码能够同时兼容微信、小程序。

[NoOneNoBody]

@7gugu #8
不考虑变形，那条形码更好
二维码当年产生的其中一个重要原因，就是改变条形码必须垂直扫码的困局，靠三点定位自动修正，可以多角度扫

[loopinfor]

镜头不是都会变形吗？

[7gugu]

@NoOneNoBody 如果纯实用角度来看是的，条形码太普遍了，满大街都是。但如果还要考虑到辨识度那一定是这种圆形更有辨识度。

[7gugu]

@loopinfor 轻微变形不影响

[7gugu]

@NoOneNoBody 还有一点其实这种圆形码要是想支持自动矫正难度也不大，只要定义一个规则来矫正就好。比如微信的小程序码是就是通过一个大的定位点+三个小定位点，来标识正确的方向。

[lhbc]

连 URL 都不支持吗

[7gugu]

@lhbc 不支持，不过这种环形码也不咋需要支持 URL ，能够存储一个乱序字符串就好了。类似短链一样，具体的信息可以存到服务器上。

[mdn]

请问 4 个角如何确定方向了，微信小程序设计的圆形二维码是 3 个角可以确认从何处开始读取

[7gugu]

@mdn
目前的处理办法是直接不确认，直接让用户自己找一个正确方向就好了，反正扫不出来也是用户的问题😂，苹果就是这么干的。

如果要优化，目前有两种方案。一个是把四个中的一个定位点做大一点或者小一点作为锚点，用来做旋转矫正，比如小程序码就是比较大的那个定位点永远都是在右下角，抖音码永远都是在右上角；二是占用编码区做一个特殊标记来做旋转矫正。不过这个我一直没空去弄，就这么放着了。

[mdn]

@7gugu #28 如果不需要确认，为何不取消了
或者重新设计下，目前感觉 4 个角在边上太突兀了

[7gugu]

@mdn 功能上是用来作为定位点，另外就是人为制造一点差异，毕竟去掉了就是一比一复刻 Apple Clips Code 了

[icenine]

感觉鲁棒性比较差

[7gugu]

@icenine 问题不大，这种私有编码主打的就是一个特别，能把它从 QRCode 中区分出来就行。如果要改进的话，编码上可以引入 RS 码等纠错码、图形上加入方向标识、识别算法上可以引入各种矫正算法。

[Arthur2e5]

@7gugu 不好意思，Clips 是可以反着扫的

[7gugu]

@Arthur2e5 那就是说 Apple 除了规范外，在识别层面上还做了额外的处理了。这个也很好解决，只要修改我前面说的特殊定位点即可实现旋转纠正。

[z6vPWtWJiu3mpB30]

说到美观，apple clip 是好看的，就是找不到能有能生成外观与 apple clip 相似的二维码生成器