二维码引发的思考及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中的像素信息，这又可以说上半年了。

https://zhuanlan.zhihu.com/p/25930169

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

 

图片自动化测试了解一下：https://cloud.tencent.com/developer/article/1004621

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与像素的桥梁。

base64生成原理：https://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html

像素对应二进制：https://juejin.im/post/5b6552586fb9a04fb53ac89b

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

以上

=============================html2canvas==================================

这个的好奇点是如何把页面转化为图片的，梳理下来比较重要的几个调用过程：

renderElement(…) 入口，此时已构造好target = new CanvasRenderer(…)，后续render方法都是调用target的clip、path等方法绘制canvas

cloneWindow(…) 生成cloner = DocumentCloner(…)；生成iframe，作为cloner.documentElement容器；最后从页面去除

NodeParser(…) 根据cloner实例化NodeContainer、StackingContext，构造stack

      NodeContainer 构造parent、style、childNodes（存放绘制信息，TextContainer / Path / NodeContainer）

      StackingContext 构造container、parent、contexts（存放StackingContext 实例）、children（存放NodeContainer 实例）

parseNodeTree(…) 填充childNodes，用于后续renderNodeContent

new Renderer(…).render(…) -> renderStack(…) -> renderStackContent(…) 按序绘制canvas