前段时间项目中需要动态的生成二维码，经过评估，前后端生成都可以。但后端生成会有两个问题：
- 没有找到正规发布出来的后端开源库。
- 二维码图片，会随着商品的增加而不断变多。
基于以上两个问题，决定在前端生成二位码。当时使用的是 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/
欢迎大家来讨论这个话题。