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实现图片平滑滚动详解
Mar 22 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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
自己动手做一个SQL解释器
2006/10/09 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
python 5个顶级异步框架推荐
2020/09/09 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
《巨人的花园》教学反思
2014/02/12 职场文书
论文答辩开场白大全
2015/05/27 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
PyQt5实现多张图片显示并滚动
2021/06/11 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers