23. 二维码 - 《express》

qrcode 服务端生成
客户端生成 qrcodejs

二维码,就是为了承载一些数据的

矩阵点
- 通常是白色或黑色小点
- 深色表示1
- 白色表示0
位置探测组
- 三个位于角落的嵌套矩形
- 用于定位二维码的方向
version
- 1-40的数字
- 数字越大,表示二维码的矩阵越大,不是像素点是矩阵点
  - 1 是 21*21
  - 40 是 177*177
mode 字符串编码方式
- Numeric: 只编码数字
- Alphanumeric: 数字和大写字母
- Kanji: 日文和中文
- Byte: 类似ascll

下图展示了不同字母编码格式,承载的字符数量,纠错等级越高,字符数量越少

Mode	L	M	Q	H
Numeric	7089	5596	3993	3057
Alphanumeric	4296	3391	2420	1852
Byte	2953	2331	1663	1273
Kanji	1817	1435	1024	784

纠错等级,纠错等级越高,字符数量越少(这就是有些二维码模糊不清,你还能扫出来的原因)
- L
- M
- Q
- H

qrcode 服务端生成

生成一个文件 ```json const QRCode = require(‘qrcode’); QRCode.toFile(‘./public/qrcode/qrcode.png’, ‘https://www.yuque.com/zhanggaorui-webs‘, err => { console.log(err) })


- 第一个参数是二维码保存的地址
- 第二个参数二维码承载的内容,
- 第三个参数二维码生成错误时的回调函数
2. 生成一个url
```json
const QRCode = require('qrcode');
QRCode.toDataURL('https://www.yuque.com/zhanggaorui-webs', (err, url) => {
    if (err) {
        console.log(err)
    }
    if (url) {
        console.log(url)
    }
})

返回的数据是一个base64编码过得二维码图片url

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAYAAAB1PADUAAAAAklEQVR4AewaftIAAATQSURBVO3BQY4jRxAEwfAC//9l1xzzVECjk6PVKszwR6qWnFQtOqladFK16KRq0UnVopOqRSdVi06qFp1ULTqpWnRSteikatFJ1aKTqkUnVYs+eQnIb1JzA+QNNU8AuVEzAblRMwH5TWreOKladFK16KRq0SfL1GwC8oSaCciNmgnIpGYC8gSQSc0E5Ak1m4BsOqladFK16KRq0SdfBuQJNU8AuVFzA2RS84aaCcgEZBOQJ9R800nVopOqRSdViz75n1MzAXlCzQRkUjMBmdT8TU6qFp1ULTqpWvTJX0bNDZBJzaRmAjKpmYDcAPk/OaladFK16KRq0SdfpubfBGRSMwG5UTMBuVEzAZnUTEAmNU+o+ZOcVC06qVp0UrXok2VA/svUTEAmNROQ3wTkT3ZSteikatFJ1aJPXlLzJwHyN1HzX3JSteikatFJ1aJPXgIyqZmAbFIzqZmAbFIzAbkBMqmZgExqboBsUvNNJ1WLTqoWnVQtwh/5IiBPqPlNQG7U3ACZ1ExAnlAzAXlCzRNAJjVvnFQtOqladFK16JNlQCY1E5AngExqJiBPqHkCyCY1E5AJyI2aTWo2nVQtOqladFK16JNfpmYCcqPmRs03qZmAPKFmAnKj5gbIpGYCMqmZgExqNp1ULTqpWnRStQh/5BcBeUPNDZAbNU8AmdTcAJnUTEAmNZuA3Kj5ppOqRSdVi06qFuGPvADkDTUTkEnNG0AmNd8E5A01E5BJzQRkUvMEkEnNGydVi06qFp1ULfrkD6NmAvInAfKEmhsgN2omIJOaCciNmknNppOqRSdVi06qFn3ykpoJyI2aJ9TcAJnUTEBugExqJiA3am6A3Kh5A8ik5gbIpGbTSdWik6pFJ1WLPvkyNW8A2QRkUnOj5gkgk5pvUjMBuVHzTSdVi06qFp1ULfrkJSCTmjeATGomIJOaCcgbQG7UTEAmNROQJ9RMQG6ATGomIDdAJjVvnFQtOqladFK16JN/GZBJzQTkCTU3QN4AcgNkUvMEkEnNBGRS84aaTSdVi06qFp1ULfrky4DcqJmATGomIBOQSc0TQG7UTEBu1NwAuVHzBJBJzaRmAjKp2XRSteikatFJ1aJPfpmaCcikZgJyo2YCMql5Qs0E5Akgk5ongGwCcgNkUvPGSdWik6pFJ1WL8Ef+w4BMam6A3Kh5AsikZgIyqZmATGqeALJJzRsnVYtOqhadVC365CUgv0nNpOYGyKTmDSCTmgnIpGYC8gSQSc0bar7ppGrRSdWik6pFnyxTswnIDZBJzRNAJjUTkEnNjZobNROQGzVPqLkBcqPmjZOqRSdVi06qFn3yZUCeULNJzQRkUnOjZgLyhJongGwCMqn5ppOqRSdVi06qFn3yPwdkUjMBmdRMQCY1E5AbNU8AmdRMQG6A3Kh546Rq0UnVopOqRZ/8ZYDcqJmATEBugPwmIDdA3lCz6aRq0UnVopOqRZ98mZpvUnMD5A01N0Bu1NwAmdRMaiYgk5oJyKRmAvJNJ1WLTqoWnVQtwh95AchvUjMBmdTcALlR8waQSc0EZFLzBJA31HzTSdWik6pFJ1WL8EeqlpxULTqpWnRSteikatFJ1aKTqkUnVYtOqhadVC06qVp0UrXopGrRSdWik6pFJ1WL/gGb0TBLL3nWwQAAAABJRU5ErkJggg==

其他配置参数,详见官网https://github.com/soldair/node-qrcode

客户端生成 qrcodejs

官网: https://github.com/davidshimjs/qrcodejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="divcode"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
    <script>
      new QRCode(divcode, {
        text: "http://yuanjin.tech",
        width: 128,
        height: 128,
        colorDark: "blue",
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    </script>
  </body>
</html>

详细配置见官网