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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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获取网页上所有链接的方法
2015/04/03 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
js 函数的副作用分析
2011/08/23 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
150行Node.js实现的dns代理工具
2019/08/02 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
简单解析Django框架中的表单验证
2015/07/17 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
学习python的前途 python挣钱
2019/02/27 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
校园报刊亭创业计划书
2014/01/02 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
写给医生的感谢信
2015/01/22 职场文书
三峡大坝导游词
2015/01/31 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android