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实现动画效果的实例代码
May 07 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
javascript中的事件代理初探
Mar 08 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
JS 基本概念详细介绍
Oct 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内核解析:PHP中的哈希表
2014/01/30 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
bootstrap fileinput完整实例分享
2016/11/08 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
写求职信有哪些注意事项
2014/05/08 职场文书
司法局火灾防控方案
2014/06/05 职场文书
好人好事新闻稿
2015/07/17 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
导游词之镇江焦山
2019/11/21 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
mysql的单列多值存储实例详解
2022/04/05 MySQL