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实现图片放大点击切换
Jun 06 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
mysql 字段类型说明
2007/04/27 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
javascript 打印页面代码
2009/03/24 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
南威尔士家居商店:Leekes
2016/10/25 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
先进工作者获奖感言
2014/02/08 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
护士岗位竞聘书
2015/09/15 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers