本文用于推荐一款很好用的二维码生成插件QRCode.js，测试使用方便且简单。 其实官方就有很好的文档，这里只是做一个我工作的记录和总结。
介绍
Github：https://github.com/davidshimjs/qrcodejs
- 主要使用canvas实现
- 原生代码，无需依赖
- 兼容性也很好，IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
使用
引入js文件
<script src="qrcode.js"></script>定义承载二维码标签
<div id="qrcode"></div>js调用
简单调用
new QRCode(document.getElementById('qrcode'), 'http://www.appblog.cn');设置参数调用
var qrcode = new QRCode('qrcode', {
text: 'http://www.appblog.cn',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});参数API
QRCode参数
new QRCode(element, option)| 名称 | 默认值 | 说明 |
|---|---|---|
element |
– | 承载二维码的DOM元素的ID |
option |
– | 参数设置 |
Option参数
| 名称 | 默认值 | 说明 | 备注 |
|---|---|---|---|
text |
– | 二维码承载的信息 | 中文使用encodeURIComponent进行编码 |
width |
256 | 二维码宽度 | 单位像素（百分比不行） |
height |
256 | 二维码高度 | 单位像素（百分比不行） |
colorDark |
‘#000000’ | 二维码前景色 | 英文\十六进制\rgb\rgba\transparent都可以 |
colorLight |
‘#ffffff’ | 二维码背景色 | 英文\十六进制\rgb\rgba\transparent都可以 |
correctLevel |
QRCode.CorrectLevel.L |
容错级别 | 由低到高QRCode.CorrectLevel.LQRCode.CorrectLevel.MQRCode.CorrectLevel.QQRCode.CorrectLevel.H |
API接口
| 名称 | 参数 | 说明 | 使用 |
|---|---|---|---|
clear |
– | 清除二维码 | qrcode.clear() |
makeCode |
string | 替换二维码 （参数里面是新的二维码内容） |
qrcode.makeCode('new content') |
var qrcode = new QRCode('qrcode',{
'text':'content',
'width':256,
'height':256,
'colorDark':'red',
'colorLoght':'transparent',
'correctLevel':QRCode.CorrectLevel.H
})
qrcode.clear();
qrcode.madkCode('new content');