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实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery实现图片放大镜效果
Dec 23 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制作的中文拼音首字母工具类
2014/12/11 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python中join()方法介绍
2018/10/11 Python
python实现可变变量名方法详解
2019/07/01 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
业务代表的岗位职责
2013/11/16 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
董事长助理岗位职责
2015/02/11 职场文书
地道战观后感2000字
2015/06/04 职场文书
歼十出击观后感
2015/06/11 职场文书
汉语拼音教学反思
2016/02/22 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL