前端生成二维码-Javascript生成二维码（QR）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端⽣成⼆维码-Javascript⽣成⼆维码（QR）
前段时间项⽬中需要动态的⽣成⼆维码，经过评估，前后端⽣成都可以。
但后端⽣成会有两个问题：
1. 没有找到正规发布出来的后端开源库。
2. ⼆维码图⽚，会随着商品的增加⽽不断变多。
基于以上两个问题，决定在前端⽣成⼆位码。
当时使⽤的是 jquery.qrcode.min.js，可以在github上找到这个类库。
下⾯来介绍下这个类怎么来使⽤，先看下⾯这个例⼦。
其中第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渲染。
1try
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上也有简短的⽤法介绍，不过真的很简短。
但作为攻城狮这都不是事，⼤家可以直接看源代码。
源代码是压缩过的，解压⼀下就⾏了。
欢迎⼤家来讨论这个话题。