jQuery qrcode生成二维码的方法


Posted in Javascript onApril 03, 2016

现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览。

以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页。

这样做不能每个页面都生成二维码。

jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件。它是独立的,最小压缩之后不足4k,也没有图片下载请求。引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码。

qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到

https://github.com/jeromeetienne/jquery-qrcode

获取最新的代码。

如何使用

1、首先在页面中加入jquery库文件和qrcode插件

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、在页面中需要显示二维码的地方加入以下代码:

<div id="code"></div>

3、调用qrcode插件

qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5

直接调用:

$('#code').qrcode("https://3water.com.com"); //任意字符串

高级属性:

$("#code").qrcode({ 
render: "table", //table方式 
width: 200, //宽度 
height:200, //高度 
text: "www.helloweba.com" //任意内容 
});
Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
React配置子路由的实现
Jun 03 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 #Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 #Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 #Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 #Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 #Javascript
You might like
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jQuery统计上传文件大小的方法
2015/01/24 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python构建网页爬虫原理分析
2017/12/19 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
国培远程培训感言
2014/03/08 职场文书
植树节活动总结
2014/04/30 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
安全生产工作汇报
2014/10/28 职场文书
小学德育工作总结2015
2015/05/12 职场文书
海洋天堂观后感
2015/06/05 职场文书
父亲去世追悼词
2015/06/23 职场文书
谢师宴家长致辞
2015/07/27 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis