一、使用方法
1.1、引入JS
HTML Code
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
1.2、DOM容器
HTML Code
<div id="qrcode"></div>
1.3、调用函数
JavaScript Code
// 简单方式
new QRCode(document.getElementById('qrcode'), 'your content');
// 设置参数方式
var qrcode = new QRCode(document.getElementById('qrcode'), {
text: 'your content',
width: 256,
height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
// 使用 API
qrcode.clear();
qrcode.makeCode('new content');
二、参数说明
new QRCode(element, option)
其中,element为显示二维码的容器元素或该元素的ID;option为参数配置,用{}包裹。
2.1、option参数说明
参数 | 默认值 | 说明 |
text |
| 二维码内容字符串 |
width | 256 | 图像宽度 |
height | 256 | 图像高度 |
typeNumber | 4 | 编码类型 [1, 40] |
colorDark | '#000000' | 前景色 |
colorLight | '#ffffff' | 背景色 |
correctLevel | QRCode.CorrectLevel.L | 容错级别,可设置为: QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H |
三、API接口
接口 | 说明 |
---|---|
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码。(仅在不支持 Canvas 的浏览器下有效) |
四、例程
4.1、简单方式例程
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode('qrcode', 'Besthelp Consulting');
</script>
</body>
</html>
4.2、设置参数方式例程
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode('qrcode', {
text: 'Besthelp Consulting',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
</script>
</body>
</html>
五、参考链接