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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
详解javascript new的运行机制
Jan 26 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
使用React代码动态生成栅格布局的方法
May 24 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
python与C互相调用的方法详解
2017/07/14 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
django最快程序开发流程详解
2019/07/19 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
社区活动邀请函范文
2014/01/29 职场文书
重点工程汇报材料
2014/08/27 职场文书
合作协议书模板2014
2014/09/26 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android