前段時間項目中需要動態的生成二維碼，經過評估，前后端生成都可以。但后端生成會有兩個問題：
- 沒有找到正規發布出來的后端開源庫。
- 二維碼圖片，會隨着商品的增加而不斷變多。
基於以上兩個問題，決定在前端生成二位碼。當時使用的是 jquery.qrcode.min.js，可以在github上找到這個類庫。
https://github.com/jeromeetienne/jquery-qrcode
下面來介紹下這個類怎么來使用，先看下面這個例子。其中第10行調用方法qrcode來生成二維碼。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script charset='utf-8' type='text/javascript' src='./jquery.js'></script> 5 <script src="./jquery.qrcode.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $('#qr_gen').click(function() 9 { 10 $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()}); 11 }); 12 }); 13 </script> 14 </head> 15 <body> 16 <h1>QR CODER</h1> 17 <div> 18 <label for="qr_link">URL:</label> 19 <input id="qr_link" type="text" value="I am going to be a quick response code." style="width:450px;" /> 20 <button id="qr_gen" value="Generate">Generate</button> <br /> 21 </div> 22 <div id="qr_container" style="margin:auto; position:relative;"></div> 23 </div> 24 </body> 25 </html>
我們來介紹下這幾個參數：
render: 二維碼圖片的生成方式。支持table和canvas來渲染。
height: 二維碼高度。
width: 二維碼寬度。
correctlevel: 二維碼容錯級別。
text: 二維碼內容。
我們先來看看用table和canvas渲染有什么不同。執行了上面的例子，大家可以看到，二維碼使用canvas畫出來，在網頁上輸出一個canvas節點。但是用到table的話，我們會發現二維碼實際是使用table表格把每一個二維碼的點畫出來。網頁上的Dom元素會暴多（目前沒有發現有拖垮瀏覽器的現象）。
對一個有追求的人，或者大型的網站，需要對ie, chrome, firefox等瀏覽器支持。選擇canvas，ie7就沒辦法支持。那就選擇table吧，一切看起來都很美好。但在實際使用的過程中，當二維碼的內容較多時，二維碼的尺寸較小時(比如120px * 120 px)，用table來渲染，會發現生成的二維碼很難識別（主要發生在chrome上）。
使用下面的辦法，所有的瀏覽器完美支持，而且大部分的用戶都會是canvas渲染。
1 try 2 { 3 document.createElement('canvas').getContext('2d'); 4 $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()}); 5 } catch (e) 6 { 7 $('#qr_container').qrcode({render:"table",height:120, width:120,correctLevel:0,text:$('#qr_link').val()}); 8 }
關於這個類庫，github上也有簡短的用法介紹，不過真的很簡短。但作為攻城獅這都不是事，大家可以直接看源代碼。源代碼是壓縮過的，解壓一下就行了。
在線解壓工具：http://tool.lu/js/
歡迎大家來討論這個話題。