Javascript生成二维码（QR）
网络上已经有很是多的二维码编码和解码工具和代码，不少都是服务器端的，也就是说须要一台服务器才能提供二维码的生成。本着对服务器性能的考虑，这种小事情都让服务器去作，感受对不住服务器，尤为是对于大流量的网站，虽然有服务器端缓存，毕竟须要大量的CPU运算时间，这或多或少也是很大的一块压力。因此就想，有没有一种不靠服务器，就只靠JS就生成二维码呢，毕竟二维码就是一堆黑白点而已。我也没有刻意去找网络上是否已经存在这样的解决方案，并且本身一直想深刻分析二维码的生成细节，现有的项目也有这样的需求，因而我本身研究了下，写下了这么个qr.js。javascript
你们能够从这个地址下载：http://files.cnblogs.com/JerryWeng/qr.jscss
先看看这个东西的效果：html
它有两种输出模式：java
第一种是直接经过<img>对于base64的支持，把二维码数据转成一个bmp编码的base64数据字符串做为<img>的src：jquery
第二种是把每一个点作成一个div，而后经过css变成一个黑白点的矩阵算法
这是测试的HTML代码：shell
<!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、参考文档缓存
在开始以前，须要准备一些参考文档来帮助理解：
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 编码 （参考度娘）
2、流程
http://www.processon.com/view/link/537c20340cf27a0d78936e61
整个流程，步骤有点多，但其实并不复杂，其中大多数步骤在标准规范中已经说明，在参考文档2中，他已经把编码部分说的很是详细，我就很少赘述了，我在下面补充说下一些比较搞的概念。
3、说明
首先是伽罗华域，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级别的，其实用户是感觉不到它的生成过程，可是若是这个操做放在服务器端，可想而知压力之大。