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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
php实现json编码的方法
2015/07/30 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php实现微信企业转账功能
2018/10/02 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python web框架学习笔记
2016/05/03 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python 从相对路径下import的方法
2018/12/04 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
学习雷锋精神活动总结
2015/02/06 职场文书
酒店宣传语大全
2015/07/13 职场文书
信息技术研修心得体会
2016/01/08 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
python数字图像处理之图像的批量处理
2022/06/28 Python