前言

在当今这个科技发达的时代，二维码随处可见，比如共享单车、支付、营销宣传等等，对于二维码的底层算法，不是我这个阶段能考虑的问题，对于一个CV工程师来说，怎么样生成和解析二维码才是关键？

介绍

二维码是什么？来看一段百度百科对它的解释：

image.png
通俗点说，就是将一段字符经过算法加密，最终生成由两种颜色组成的色块，当我们扫描二维码时，其实是对二维码的解码拿到原字符。

生成二维码

生成二维码的插件有很多，这里就使用比较常用的 qrcodejs。这里以一个单独的 html 举例，在这个 html 中，首先存在一个 id 为 box 的 div：

<div id="box"></div>

然后我们打开 bootcdn 官网，搜索 qrcode，我们会发现很多 生成二维码 的插件，这里我们选择第一个：

image.png

复制 min.js 的标签：

image.png

将复制的内容，粘贴在我们的 html 里面：

<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

接下来开始生成二维码，实例化 qrcode：

const qrcode = new QRCode("box", {
  text: "webxue",
  width: 128,
  height: 128,
  colorDark : "black",
  colorLight : "white",
  correctLevel : QRCode.CorrectLevel.H
});

第一个参数传这个容器的 id，也就是我们最开始定义的 div
第二个参数是个 option
- option.text 为生成二维码的字符，当我们解析二维码之后就可以拿到该值
- option.width 为生成二维码的宽度
- option.height 为生成二维码的高度
- option.colorDark 为二维码深色区域的颜色
- option.colorLight 为二维码浅色区域的颜色
- option.correctLevel 为二维码的纠错级别，也就是模糊程度，它的值可以从 QRCode 对象的CorrectLevel 对象中取，有 L、M、Q、H 四个等级，模糊等级分别由低到高，模糊等级越高，text 的长度就应该越少

这是从网上找的 不同模糊等级 对应可存放的 text字符数：

image.png

这个时候二维码就已经生成了，如果这个容器不想使用 id命名，QRCode 的第一个参数还可以是一个 DOM对象，比如有个 class 为 box1 的 div，将 QRCode 的第一个参数改为 获取dom元素的api：

const qrcode = new QRCode(document.querySelector(".box1"), {
  // ...
});

这样也可以生成二维码。

比如我们想 动态 改变这个二维码的内容，可以直接调用 qrcode 的 makeCode 方法传入 新的text 内容：

qrcode.makeCode("webxue222");

比如想要 清除 这个二维码，可以调用 qrcode 的 clear 方法：

qrcode.clear();

如果大家感兴趣，可以将 qrcode.js 源码下载下来看一看，可以看到 new QRCode 的时候接收这些参数：

image.png

而且他还对 第一个参数 做了 类型判断，如果是 字符串 就使用 getElementById 获取，否则就默认我们传入的是 DOM元素。

结语

这篇文章主要学会使用 qrcodejs 来生成二维码，毕竟是一名搬砖工程师，如果这都不会用，砖还咋搬？

我是一名前端程序员，但不至于前端，希望文章可以对你有所帮助，大家一起学习，一起进步~，最后，再次感谢你能看到这里！