前端QRCode.js生成二维码插件

本文用于推荐一款很好用的二维码生成插件QRCode.js,测试使用方便且简单。 其实官方就有很好的文档,这里只是做一个我工作的记录和总结。

介绍

Github:https://github.com/davidshimjs/qrcodejs

  • 主要使用canvas实现
  • 原生代码,无需依赖
  • 兼容性也很好,IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

使用

引入js文件

1
<script src="qrcode.js"></script>

定义承载二维码标签

1
<div id="qrcode"></div>

js调用

简单调用

1
new QRCode(document.getElementById('qrcode'), 'http://www.appblog.cn');

设置参数调用

1
2
3
4
5
6
7
8
var qrcode = new QRCode('qrcode', {
text: 'http://www.appblog.cn',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});

参数API

QRCode参数

1
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.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

API接口

名称 参数 说明 使用
clear - 清除二维码 qrcode.clear()
makeCode string 替换二维码
(参数里面是新的二维码内容)
qrcode.makeCode('new content')
1
2
3
4
5
6
7
8
9
10
11
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');

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2021 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :