QRCode.js生成二维码
https://github.com/KeeeX/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"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Javascript 二维码生成库:QRCode</title> <style> body{ text-align: center; } input[name='content']{ width: 200px; margin-top: 10px; } div#qrcode{ width: 100px; height: 100px; border: 1px dashed #aaa; margin: 0 auto; margin-top: 15px; } textarea{ width: 198px; height: 120px; display: block; margin: 0 auto; } </style> </head> <body> <input name="content" id="oneline_text" value="mail: 812852259@qq.com" /> <textarea id="multiline_text">姓名:123456 邮箱:123456789@qq.com</textarea> <div id="qrcode"></div> <script type="text/javascript" src="你自己的路径\qrcode.min.js"></script> <script> const input = document.getElementById("oneline_text"); const textarea = document.getElementById("multiline_text"); const qrcode = new QRCode(document.getElementById("qrcode"), { width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.L }); function makeCode(value) { if (!value) { alert("Input a text !!!"); return; } qrcode.makeCode(value); } input.addEventListener("blur", function(){ makeCode(this.innerText || this.value); }); input.addEventListener("keydown", function(e){ if (e.keyCode === 13) { makeCode(this.innerText || this.value); } }); textarea.addEventListener("blur", function(){ makeCode(this.innerText || this.value); }); </script> </body> </html>
qrcode实现二维码单行展示使用input,
qrcode实现二维码多行展示使用textarea
qrcode的配置参考: