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实现div跟随鼠标移动
Aug 20 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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
session 的生命周期是多长
2006/10/09 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python人人网登录应用实例
2014/09/26 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python统计中文字符数量的两种方法
2019/01/31 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
python调用百度API实现人脸识别
2020/11/17 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
公务员培训自我鉴定
2013/09/19 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学生学习计划书
2014/09/15 职场文书
四年级学生期末评语
2014/12/26 职场文书
客户经理岗位职责
2015/01/31 职场文书
教务处教学工作总结
2015/08/10 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js