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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
vue组件学习教程
2017/09/09 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
vuex的简单使用教程
2018/02/02 Javascript
React中的refs的使用教程
2018/02/13 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python数组过滤实现方法
2015/07/27 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
总经理助理岗位职责
2013/11/08 职场文书
实习自我评价怎么写
2013/12/02 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
和平主题的演讲稿
2014/01/12 职场文书
房屋租赁意向书
2014/04/01 职场文书
早会开场白台词大全
2015/06/01 职场文书
python中使用redis用法详解
2022/12/24 Redis