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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
利用PHP创建动态图像
2006/10/09 PHP
使用php+xslt在windows平台上
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
json跟xml的对比分析
2008/06/10 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python str字符串转uuid实例
2020/03/03 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
大二学期个人自我评价
2014/01/13 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
大学开学感言
2015/08/01 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL