参考:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
运行代码:https://www.runoob.com/try/try.php?filename=tryhtml5_QRCode
支持该库的浏览器有:IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接
</script>
或者使用一些可选参数设置:
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
同样我们可以使用以下方法:
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
new QRCode(element, option)
名称 | 默认值 | 说明 |
---|---|---|
element | - | 显示二维码的元素或该元素的 ID |
option | 参数配置 |
名称 | 默认值 | 说明 |
---|---|---|
width | 256 | 图像宽度 |
height | 256 | 图像高度 |
typeNumber | 4 | |
colorDark | "#000000" | 前景色 |
colorLight | "#ffffff" | 背景色 |
correctLevel | QRCode.CorrectLevel.L | 容错级别,可设置为: QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H |
名称 | 说明 |
---|---|
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码。(仅在不支持 Canvas 的浏览器下有效) |
Qrcode 库及实例下载:qrcodejs-04f46c6.zip
Github 地址:https://github.com/davidshimjs/qrcodejs