51工具盒子我们飞得越高，我们在那些不能飞的人眼中的形象就越渺小。------尼采《查拉图斯特拉如是说》
我们使用qrcodejs生成：https://github.com/davidshimjs/qrcodejs
下载这个js并引用
不知道怎么下载的可以直接到这个链接下按ctrl+s另存为
https://raw.githubusercontent.com/davidshimjs/qrcodejs/master/qrcode.min.js
然后编写代码：
|---------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | hljs html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/qrcode.min.js" type="text/javascript"></script> </head> <body> <div id="qrcode"></div> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://VampireAchao.github.io/", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); </script> </body> </html> |
就可以了
但如果我们需要设置logo，就可以往上面二维码正中放一个图片就可以了：
|---------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | hljs html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/qrcode.min.js" type="text/javascript"></script> <style type="text/css"> #qrcode { position: relative; } #qrcode::after { content: ''; display: block; width: 50px; height: 50px; background: url(/imgs/oss/2020-06-01/head.jpg) no-repeat; background-size: 50px 50px; border-radius: 5px; box-shadow: 1px 1px 10px #000; position: absolute; top: 106px; left: 102px; } </style> </head> <body> <div id="qrcode"> </div> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://VampireAchao.github.io/", width: 256, height: 256, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); </script> </body> </html> |
效果如下：
有时扫不出来可能是二维码周围没有白边或者白边太少，导致相机识别失败，这个时候加一个白边就好了
