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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
简单的jQuery入门指引
Jul 28 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php join函数应用
2011/05/04 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python常用小技巧总结
2015/06/01 Python
Python3字符串学习教程
2015/08/20 Python
python使用udp实现聊天器功能
2018/12/10 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
工程班组长岗位职责
2013/12/30 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
小学敬老月活动方案
2014/02/11 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
团队精神口号
2014/06/06 职场文书
车间安全生产标语
2014/06/06 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
公司放假通知怎么写
2015/04/15 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
python中对列表的删除和添加方法详解
2022/02/24 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js