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

本文用于推荐一款很好用的二维码生成插件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.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.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');

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/02/25/front-end-qrcode-js-generate-qr-code-plugin/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
前端QRCode.js生成二维码插件
本文用于推荐一款很好用的二维码生成插件QRCode.js,测试使用方便且简单。 其实官方就有很好的文档,这里只是做一个我工作的记录和总结。 介绍 Github:https:……
<<上一篇
下一篇>>
文章目录
关闭
目 录