QRCode.js生成二维码

2022-10-22,,,

QRCode的GitHub地址:

  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的配置参考:

QRCode.js 生成二维码

js生成二维码——QRCode.js中文文档

QRCode.js生成二维码的相关教程结束。

《QRCode.js生成二维码.doc》

下载本文的Word格式文档,以方便收藏与打印。