二维码生成插件qrious及网站扫码登录的一些理解
什么是二维码
二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
特点：
信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
应用范围广, 支持文字,声音,图片,指纹等等...
容错能力强, 即使图片出现部分破损也能使用
成本低, 容易制作
容错级别：
**L级**（低） 7％的码字可以被恢复。
**M级**（中） 的码字的15％可以被恢复。
**Q级**（四分）的码字的25％可以被恢复。
**H级**（高） 的码字的30％可以被恢复。
二维码生成插件qrious.js
qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| background | String | "white" | 二维码的背景颜色。 |
| foreground | String | "black" | 二维码的前景颜色。 |
| level | String | "L" | 二维码的误差校正级别(L, M, Q, H)。 |
| mime | String | "image/png" | 二维码输出为图片时的MIME类型。 |
| size | Number | 100 | 二维码的尺寸，单位像素。 |
| value | String | "" | 需要编码为二维码的值 |
qrious生成二维码的代码：
<html>
<head>
<title>二维码入门小demo</title>
</head>
<body>
<img id="qrious">
<script src="qrious.min.js"></script>
<script>
var qr = new QRious({
element:document.getElementById('qrious'),
size:250,
level:'H',
value:'http://www.baidu.com'
});
</script>
</body>
</html>
网站扫码登录的一些理解：
第一步：用户A访问网页版系统点击使用二维码登录，系统服务器为这个会话生成一个全局唯一的id，并以此id为基础生成url做成二维码放到页面上（www.xxx.com/login.html?id=xxxxxxx），
于此同时需要把此id写到redis之类的数据库中（可以以id为key），此时系统并不知道访问者是谁。 第二步：用户A打开自己的该系统的手机APP并扫描这个二维码，首先验证手机端用户是否登录，登录过后跳转到扫码得到的url中。 第三步：手机端是登录状态，用户点击url中的确认登录后，手机上的客户端将账号信息和这个扫描得到的id 一起提交到redis中（根据id这个key，把用户信息及token之类的登录信息写到value中）。 第四步：一般来说在第一步之后，需要建立一个长连接或者轮询查看redis这个以id为key的value值，如果value不为空且验证用户身份后，通知网页版系统，这个ID对应的用户是A，然后使其登录网页版。
但是这种长连接是比较耗费资源的，可以考虑用GOEASY之类的web消息推送来代替长连接这种方式。
二维码生成插件qrious及网站扫码登录的一些理解的更多相关文章
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- Highcharts使用二维数组生成图表
Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-3.微信网站扫码支付介绍
笔记 3.微信网站扫码支付介绍 简介:讲解微信网页扫码支付 1.扫码支付文档:https://pay.weixin.qq.com/wiki/doc/api/native.php ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- js 二维码生成 插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
- Chrome浏览器二维码生成插件
猛击就可以使用啦->>>猛击使用 源码如下: 源码打包 源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...
- 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
随机推荐
- 获得消息的x，y的窗口内坐标（包括边框和titlebar高度
rectWindow = D2D.GetWindowRect(self.hwnd)#窗口大小 rectClient = D2D.GetWindowRect(self.hwnd,True)#客户区大小 ...
- TCP/IP概念简述
这里所说的是广义上的TCP/IP协议群,而不是特指TCP和IP这两种具体的协议.既然是协议群,那么都有哪些协议呢?我们先不着急回答这个问题,因为要弄清楚这个问题,首先得了解另两件事,就是为啥要有这个协 ...
- Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...
- java中Mongo
1. query.fields().include("idfa").include("imei").include("id").inclu ...
- 关于FFT的硬件实现
DFT在实际应用中非常重要,可以计算信号的频谱,功率谱和线性卷积等. 离散傅里叶变换的公式: 其中: 称为旋转因子. 由欧拉公式可得: 直接按DFT变换进行计算,当序列长度N很大时,计算量非常大,所 ...
- linux性能监控——CPU、Memory、IO、Network
一.CPU 1.良好状态指标 CPU利用率:User Time <= 70%,System Time <= 35%,User Time + System Time <= 70%. 上 ...
- 竖屏拍照，但是sd卡中却是横屏解决方法
protected void onActivityResult(int requestCode, int resultCode, Intent data) { switch (resultCode) ...
- hadoop Partiton中的字符串Hash函数改进
最近的MapReduce端的Partition根据map生成的Key来进行哈希,导致哈希出来的Reduce端处理任务数量非常不均匀,有些Reduce端处理的数据量非常小(几分钟就执行完成,而最后的pa ...
- 无线加密的多种方法及其区别（WEP WPA TKIP EAP）
无线加密的多种方法及其区别(WEP WPA TKIP EAP) 无线网络的安全性由认证和加密来保证. 认证允许只有被许可的用户才能连接到无线网络: 加密的目的是提供数据的保密性和完整性(数据在传输过程 ...
- ALSA声卡12_从零编写之添加音量控制_学习笔记
1.设置音量时应用程序的调用过程 (1)strace分析: amixer cset numid=1 30 (设置音量) /dev/snd/controlC0 open SNDRV_CTL_IOCTL_ ...