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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
javascript中的throttle和debounce浅析
2014/06/06 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python连接phoenix的方法示例
2017/09/29 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
生产总经理岗位职责
2013/12/19 职场文书
公司离职证明范本
2014/10/17 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
国富论读书笔记
2015/06/26 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis