qrcode.js - 使用JS动态显示二维码

一、使用方法

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>

五、参考链接

http://davidshimjs.github.io/qrcodejs/

qrcode.js - 使用JS动态显示二维码

猜你喜欢