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调用asp.net 页面后台的实现代码
Apr 27 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
vuejs实现下拉框菜单选择
Oct 23 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自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
html5与css3小应用
2013/04/03 HTML / CSS
ECHT官方网站:男女健身服
2020/02/14 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
品质主管的岗位职责
2013/12/04 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
预备党员政审材料
2014/02/04 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
员工安全责任书范本
2014/07/24 职场文书
先进党支部事迹材料
2014/12/24 职场文书
个人道歉信大全
2019/04/11 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL