網絡上已經有非常多的二維碼編碼和解碼工具和代碼，很多都是服務器端的，也就是說需要一台服務器才能提供二維碼的生成。本着對服務器性能的考慮，這種小事情都讓服務器去做，感覺對不住服務器，尤其是對於大流量的網站，雖然有服務器端緩存，畢竟需要大量的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級別的，其實用戶是感受不到它的生成過程，但是如果這個操作放在服務器端，可想而知壓力之大。