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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
常见的python正则用法实例讲解
2016/06/21 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
升职自荐信范文
2013/10/05 职场文书
小组合作学习反思
2014/02/18 职场文书
农业项目投资意向书
2015/05/09 职场文书
企业培训简报范文
2015/07/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
方法汇总:Python 安装第三方库常用
2022/04/26 Python