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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
angular.element方法汇总
Jan 07 Javascript
js打造数组转json函数
Jan 14 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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新手上路(五)
2006/10/09 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python机器学习之神经网络(三)
2017/12/20 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python单例模式的多种实现方法
2019/07/26 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python爬虫要用到的库总结
2020/07/28 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
国庆宣传标语
2014/06/30 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书