Javascript生成二维码（QR）
网络上已经有非常多的二维码编码和解码工具和代码，很多都是服务器端的，也就是说需要一台服务器才能提供二维码的生成。本着对服务器性能的考虑，这种小事情都让服务器去做，感觉对不住服务器，尤其是对于大流量的网站，虽然有服务器端缓存，毕竟需要大量的CPU运算时间，这或多或少也是很大的一块压力。所以就想，有没有一种不靠服务器，就只靠JS就生成二维码呢，毕竟二维码就是一堆黑白点而已。我也没有刻意去找网络上是否已经存在这样的解决方案，而且自己一直想深入分析二维码的生成细节，现有的项目也有这样的需求，于是我自己研究了下，写下了这么个qr.js。
大家可以从这个地址下载：http://files.cnblogs.com/JerryWeng/qr.js
先看看这个东西的效果：
它有两种输出模式：
第一种是直接通过<img>对于base64的支持，把二维码数据转成一个bmp编码的base64数据字符串作为<img>的src：
第二种是把每个点做成一个div，然后通过css变成一个黑白点的矩阵
这是测试的HTML代码：
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="./qr.js" type="text/javascript"></script>
<script type="text/javascript">
var qr_coder = null;
$(document).ready(function(){
qr_coder = new QRCoder($('#qr_container'));
$('#qr_gen').click(function()
{
$('#qr_container').html("generating"); var watch_start=new Date();
qr_coder.setMode(1);
qr_coder.draw(
$('#qr_link').val(),
$("[name='qr_capacity']:checked").val(),
'icon.png',
function(data)
{
var watch_end=new Date();
console.log("cost:"+(watch_end-watch_start)+"ms"); });
});
});
</script> </head>
<body>
<h1>QR CODER</h1>
<div style="margin:auto; position:relative; margin-left: 50%; left: -250px; width:500px;">
<label for="qr_link">URL:</label>
<input id="qr_link" type="text" value="http://you.ctrip.com" style="width:350px;" />
<button id="qr_gen" value="Generate">Generate</button> <br />
<div style="display:none">
<input id="qr_capacity_l" name="qr_capacity" type="radio" value="L"/> <label for="qr_capacity_l">7%</label>
<input id="qr_capacity_m" name="qr_capacity" type="radio" value="M"/> <label for="qr_capacity_m">15%</label>
<input id="qr_capacity_q" name="qr_capacity" type="radio" value="Q"/> <label for="qr_capacity_q">25%</label>
<input id="qr_capacity_h" name="qr_capacity" type="radio" value="H" checked/> <label for="qr_capacity_h">30%</label>
</div>
</div>
<div id="qr_container" style="margin:auto; position:relative;"></div>
</body>
</html>
在IE6，7，8，9，10，Firefox，Chrome中测试通过。
如果对于实现细节感兴趣，下面我来详细说明如何实现。
一、参考文档
在开始之前，需要准备一些参考文档来帮助理解：
1, QR 国际标准 ISO/IEC 18004. (http://raidenii.net/files/datasheets/misc/qr_code.pdf)
2, http://coolshell.cn/articles/10590.html
3, Galois Field 伽罗华域 (参考度娘)
4, Reed Solomon 纠错编码 (参考度娘)
5, Bitmap 编码规范 （http://zh.wikipedia.org/wiki/Bitmap）
6, Base64 编码 （参考度娘）
二、流程
http://www.processon.com/view/link/537c20340cf27a0d78936e61
整个流程，步骤有点多，但其实并不复杂，其中大多数步骤在标准规范中已经说明，在参考文档2中，他已经把编码部分说的非常详细，我就不多赘述了，我在下面补充说下一些比较搞的概念。
三、说明
首先是伽罗华域，QR的纠错编码都是基于GF(256)的，GF的最大特性是它的封闭性，无论是加减乘除，它计算结果始终落在这个有限域中，并且GF256中的任何一个元素，都可以用GF2的组合来表示，也就是0，1表示，我们通过1+x^1+x^2+...+x^n这样的多项式来表示一个这个有限域中的数，其实，我们不用在意这里的x，我们只关心这个多项式的系数组合，每个x的指数代表系数所占的位数，比如x^8+x^6+x+1就对应二进制10100011,所以其实都是二进制的运算。GF256一共就256个数，我们可以生成好，然后以数组和哈希表的形式来参与计算，具体如何生成GF256的，大家可以参考下这篇wiki，http://en.wikipedia.org/wiki/Finite_field_arithmetic
然后是RS纠错编码，RS编码都是基于GF256的，所以，我们需要先熟悉GF256的运算方法，RS编码说简单了，就是首先知道我需要有多少个纠错的codeblock，然后以这个数构造一个生成多项式:(x-a^0)(x-a^1)...(x-a^n-1)，这里的a，或叫alpha，就是GF256里的底数，a^n-1代表一个GF256有限域中元素，这里的n就是纠错codeblock的个数，然后把要编码的数据codeblocks组成一个类似的多项式，每个codeblock的值就是多项式的系数，从高位到低位排列，用这个数据多项式除以生成多项式，然后取余数，这个余数也应该是在GF256里的数，其实就是手工法取余，这些运算方法在GF的那篇wiki里也有说明，详细也可参见这篇wiki：http://en.wikipedia.org/wiki/Reed–Solomon_error_correction
再说下mask的问题，最后编码后的数据，为了能够尽量地分散黑点和白点的分布，便于扫描器扫描，需要每个数据位与某种mask做XOR，为什么不是固定的mask呢，因为没法用一种mask分散所有的编码。规范中列举了8种mask函数，这些函数，只要符合，就返回1，否则是0，然后每个对应的数据位（x,y）代入这个函数，然后再和相应的数据位XOR，这里的x代表列号，y代表行号，左上角是0点，规范中的i代表的是行号，j代表的是列号，这点要注意。然后我们要从8个mask函数中选择一个最合适的，选择方法是分别和4种决策方法并根据其权重计算一个分数并求和，选取这个得分最低的mask就是我们要用的mask。这4种决策方法和权重在规范中有列举，稍微看下，不难理解。其实这部操作也是最耗性能的，因为必须要做8*4次计算，而且每次计算要扫描整个数据阵列。其实前3种决策方法算起来还都好，最麻烦的是最后种，要计算m*n同色块，每次出现需要加(m-1)*(n-1)*3,这个计算我没有找到一个比较理想的算法，我变通的做法是，只计算出现机率最多的小块矩形，2<=m<6,2<=n<6的共16种矩形，其实结果计算的差不了多少。其实不是说没有算对就完全扫不出来，这个选取操作可以让生成的二维码最优化而已。这个操作在客户端大概在百ms级别的，其实用户是感受不到它的生成过程，但是如果这个操作放在服务器端，可想而知压力之大。
Javascript生成二维码（QR）的更多相关文章
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...
- 前端生成二维码 - Javascript生成二维码（QR）
前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...
- QRCode.js：使用 JavaScript 生成二维码
什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 基本用法 ...
- JavaScript生成二维码图片
1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- 用ABAP 生成二维码 QR Code
除了使用我的这篇blogStep by step to create QRCode in ABAP Webdynpro提到的使用ABAP webdynpro生成二维码之外,也可以通过使用二维码在线生成 ...
- javaScript生成二维码（支持中文，生成logo）
资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...
- javascript生成二维码
参考: http://www.w3dev.cn/article/20140617/javascript-create-QR-code.aspx
- 使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
一.简介 1.说明 qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienn ...
随机推荐
- 从RPC开始（一）
这是一篇关于纯C++RPC框架的文章.所以,我们先看看,我们有什么? 1.一个什么都能干的C++.(前提是,你什么都干了) 2.原始的Socket接口,还是C API.还得自己去二次封装... 3.C ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面
系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...
- Android总结之链式调用(方法链)
前言: 最近在学习总结Android属性动画的时候,发现Android的属性动画设计采用了链式调用的方式,然后又回顾了一下了以前接触的开源框架Glide也是采用链式调用的方式,还有最近火的一塌糊涂的R ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 我这么玩Web Api（二）：数据验证，全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- ASP.NET MVC5----常见的数据注解和验证
只要一直走,慢点又何妨. 在使用MVC模式进行开发时,数据注解是经常使用的(模型之上操作),下面是我看书整理的一些常见的用法. 什么是验证,数据注解 验证 从全局来看,发现逻辑仅是整个验证的很小的一部 ...
- bzoj3932--可持久化线段树
题目大意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第 ...
- 【Java大系】Java快速教程
感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品.James Gosling领 ...
- H3 BPM让天下没有难用的流程之技术体系
一.技术架构 H3 BPM 基于微软.NET 技术架构,采用C#语言开发,以高开放.高扩展.高性能为核心准则,遵循分层的设计原理,结合最新的B/S 以及智能手机应用开发技术研发的. 图:H3 BPM ...
- linux下 lvm 磁盘扩容
打算给系统装一个oracle,发现磁盘空间不足.在安装系统的时候我选择的是自动分区,系统就会自动以LVM的方式分区.为了保证系统后期的可用性,建议所有新系统安装都采用LVM,之后生产上的设备我也打算这 ...