QRCode.js介绍
QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。
QRCode.js下载地址
用法如下
只使用一个插件，生成的二维码没有logo以及背景图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR二维码</title>
<script src='./qrcodejs/qrcode.js'></script>
</head>
<body>
内容：<input type="text" id="content" value="https://fenkexie.cn" /> <br><br>
尺寸：<input type="text" id="size" value="150"><br><br>
背景：<input type="text" id="color" value="#fff"><br><br>
前景：<input type="text" id="colorr" value="#000"><br><br>
<button id="btn">生成二维码</button><br><br>
<div id="qrcode"></div>
</body>
<script type="text/javascript">
//声明变量
let qrcode;
let content;
let size;
let color;
let colorr;
// 设置点击事件
document.getElementById("btn").onclick =function(){
// 获取内容
content = document.getElementById("content").value;
// 获取尺寸
size = document.getElementById("size").value;
// 获取背景
color = document.getElementById("color").value;
// 获取前景
colorr = document.getElementById("colorr").value;
// 清除上一次的二维码
if(qrcode){
qrcode.clear();
}
// 创建二维码
qrcode = new QRCode(document.getElementById("qrcode"), {
width : size,//设置宽高
height : size,//设置宽高
colorLight : color,//设置背景
colorDark : colorr,//设置前景
});
qrcode.makeCode(document.getElementById("content").value);
}
</script>
</html>展示图
原创文章，作者：zbwyfkx，如若转载，请注明出处：https://www.fenkexie.cn/archives/43/
