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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
PHP rmdir()函数的用法总结
2019/07/02 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
Prototype Array对象 学习
2009/07/19 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
查看Django和flask版本的方法
2018/05/14 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python递归函数用法详解
2020/10/26 Python
python 实现波浪滤镜特效
2020/12/02 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
别名指示符是什么
2012/10/08 面试题
经济类毕业生求职信
2014/06/26 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
世界气象日活动总结
2015/02/27 职场文书
2019军训心得体会
2019/06/27 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
python实现会员管理系统
2022/03/18 Python