二维码引发的思考及canvas图像处理，一篇打开新世界的post

首先来看下二维码的相关原理：https://coolshell.cn/articles/10590.html

总之，就是定义了一堆规则，然后根据编码规则绘制黑、白块，就形成二维码了；扫描时也是根据相应的规则进行解析

下面看一些好玩的东西：GitHub中搜索QRCode，选个python的最多星（https://github.com/sylnsfar/qrcode），你会发现，二维码竟然非但可以做成图片的、彩色的，还可以是gif的动态图！！！简直6到飞起

这些都是多亏了【纠错码】的存在，可以理解为在朴实无华的黑白块基础上，穿了个时装，但同时也加入了脱掉时装的钥匙【也就是纠错码】，所以最终总能还原黑白块的真实面目。

作为大前端的我们当然也想说，是不是有js也可以实现类似的事情呢？当然是可以的，最高star的js项目实现了这样的功能：（https://github.com/kciter/qart.js）↓。虽然没有颜色，虽然没有动图，但还是可以有图像的不是？

二维码引发的思考及canvas图像处理，一篇打开新世界的post

这里的图像合成主要用的是canvas中的像素信息，这又可以说上半年了。

主要是getImageData操作像素，每个像素占4个数组元素，分别是rgba

H5扫描二维码了解一下（兼容不好）：https://github.com/LazarSoft/jsqrcode

Awesome works with canvas：https://github.com/0326/canvas 里面有滤镜、web截屏（https://github.com/niklasvh/html2canvas/）等高大上的图片处理相关项目，简直是宝藏！！

后续打算看下qart.js、html2canvas、jsqrcode源码，有新发现了再更新鸭~

=============================qart.js==================================

图片合成之前已经说过，是利用canvas的getImageData操作的。这里比较好奇的是如何生成二维码图片的，主要代码是src/qart.js 的 make() -> src/qrcode.js 的 make() 以及 createImgObject() 方法。

make() 方法基本可以理解为是根据一系列规则创建表示二维码的数据的，createImgObject() 最终是生成了一个base64的image对象。

那么问题来了，它是根据什么规则去生成base64去表示二维码图片的呢？换句话说base64是如何与图片中每个像素对应起来的。很容易想到的是二进制，因为计算机归根结底都是二进制的世界，所以二进制肯定也是base64与像素的桥梁。

至于具体的规则操作，里面涉及较多位运算，此处不深入了。

以上