二维码生成插件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> & ...
随机推荐
- fabio 安装试用&&实际使用的几个问题
备注: 因为fabio 依赖consul vault (不是强需),启动之前需要先安装consul, 本次为了简单consul 使用的是单机,使用的是dev 模式 1. conusl ...
- C# 线程间不能调用剪切板的问题
最近做一个项目,需要用到线程,而且要用到剪切板,创建了一个子线程之后发现在子线程中剪切板上获取不到数据,当时特别纳闷,上网查资料,最后终于搞定,现将解决方法归纳如下: 第一步: public void ...
- Jacoco在eclipse上的集成使用
随着敏捷开发的流行,编写单元测试已经成为业界共识.但如何来衡量单元测试的质量呢?有些管理者片面追求单元测试的数量,导致底下的开发人员投机取巧,编写出大量的重复测试,数量上去了,质量却依然原地踏步.相比 ...
- PHP与理在事先
编程语言的应用选择,大家有各种各样的看法.高级语言有C,C++,C#,面向对象语言的典型代表Java是从信息电器发展的,因此有它的优势,也有它的局限.新编程语言族则有PHP,Ruby,Python,R ...
- sqlserver2008事务日志已满
--将数据库设为简单模式.日志文件自动断开. alter database CustomerInfoProject set recovery simple --查看日志文件状况 use Custom ...
- linux命令ls -l的默认排序方式
差不多快实现完了ls -l,但是在测试阶段发现一个问题,对于包含[a-ZA-Z]之外的字符,系统的排序方式并不一样. 很想了会儿,总算发现原来它的排序方式是无视[a-ZA-Z]之外的字符的 至于怎么发 ...
- java根据特定密钥对字符串进行加解密
package com.test; import java.io.IOException; import java.security.SecureRandom; import javax.crypto ...
- GC之九--gc调优
目标 满足应用的响应时间和吞吐量需求,尽量减少GC对应用的影响 原则 大部分时候都不需要调优GC,只需配置-Xms,-Xmx即可,JVM会自动进行调整 先满足响应时间需求,再满足吞吐量需求 FullG ...
- AngularJS.js: temple
ylbtech-AngularJS.js: temple 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 ...
- javascript或node中的console用法总结
//建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:" ...