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 相关文章推荐
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
PHP通用检测函数集合
2011/02/08 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
python打开网页和暂停实例
2014/09/30 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python实现随机加减法生成器
2020/02/24 Python
序列化Python对象的方法
2020/08/01 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
Unix如何添加新的用户
2014/08/20 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
影子教师研修方案
2014/06/14 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
浅析Python实现DFA算法
2021/06/26 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript