QRCode.js:基于JQuery的生成二维码JS库的使用


Posted in jQuery onJune 23, 2017

1. QRCode.js

QRCode.js是一个二维码生成javascript库;支持跨浏览器的HTML5 Canvas和表格标签的DOM操作;并且不依赖其它的库或拓展。

主页:QRCode.js

Github:davidshimjs/qrcodejs 

2. 用法

2.1 基础用法

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://www.gzpblog.com");
</script>

2.2 传参用法

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://www.gzpblog.com",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});
</script>

2.3 调用函数

qrcode.clear(); // 清除二维码
qrcode.makeCode("https://www.gzpblog.com"); // 创建一个新的二维码

3. 适用范围

之前用PHP QR Code来生成二维码,发现通过这个PHP插件来生成,有些小问题;它内部集成得不是很好,不是很适合用来直接展示二维码到浏览器上,样式不好控制(不保存二维码文件的情况下)。

而使用QRCode.js可以非常方面地控制样式,就像一张图片一样来用,因为图片直接输出到

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

中,非常可控。就像之前微信支付官方的sdk,phpsdk是用的phpqrcode来生成,改成QRCode.js,之后,一个简单的效果:

QRCode.js:基于JQuery的生成二维码JS库的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
You might like
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
JavaScript 参考教程
2006/12/29 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python生成器的使用方法
2013/11/21 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
运动会广播稿200字
2014/01/15 职场文书
活动总结怎么写啊
2014/05/07 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android