QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]
QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。
- 项目地址：https://github.com/davidshimjs/qrcodejs
- 菜鸟学院：https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
![QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]-度崩网-几度崩溃](https://img.vlogforum.com/imgs/2020/05/B_A4P761B7Y2FDU8XLGC.png "QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]-度崩网-几度崩溃")
基本用法：
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>
控制选项：
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
你可以使用一些方法：
qrcode.clear();
// clear the code.
qrcode.makeCode("http://naver.com");
// make another code.
浏览器兼容性
IE6〜10，Chrome，Firefox，Safari，Opera，Mobile Safari，Android，Windows Mobile，ETC。
如何使用？
您需要先加载 jquery.js 和 qrcode.js 这两个JS，（页底提供压缩包）
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/qrcode.min.js"></script>
这是一个简单的用法
<div id="value1">https://www.npc.ink/#</div>
<div id="qrcode-n"></div>
<script>
abc = $("#value1").text();
//document.write(abc);
new QRCode(document.getElementById("qrcode-n"), abc);
</script>
扩充：
在网页快速生成二维码的演示
- 代码来源：https://www.dpaoz.com/166
只使用一个插件，不使用任何动态编程语言，不调用jq等插件。生成二维码，生成的二维码没有徽标以及背景图。
此代码中，无法去除上一次生成的二维码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JS 生成二维码</title>
</head>
<body>
内容：<input type="text" id="content" value="https://i.csdn.net/#/uc/profile" /> <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 src='qrcode/qrcode.js'></script>
<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>