使用JavaScript生成二维码

最近几年，二维码在中国悄然兴起，大街小巷随处可见，小区门口卖烤红薯的大爷大妈都知道树一个二维码的牌子收账。

我们日常使用的二维码，以QR码最为常见。QR码全称“快速响应矩阵码（Quick Response Code）”，由日本DENSO WAVE公司在1994年发明，也最早在日本得到较为广泛的应用。

一个标准的QR码结构如下，读者可对照微信/QQ的名片二维码进行比较：

二维码结构

生成二维码的方式有很多，像服务器端脚本语言PHP、Ruby、Python等都可以用来生成二维码，本文将使用JavaScript来完成这个任务，并最终完成一个较为完整的web应用。

QRCode.js

使用代码生成二维码本身是一件较为复杂的工作，但幸运的是，许多现有的库已经帮我们做好了这个工作。QRCode.js是其中非常出色的一个，可完美地支持IE6~10以及其他多个浏览器，并且不依赖其他任何库，项目地址：https://github.com/davidshimjs/qrcodejs。我们只需要下载用于生产环境的qrcode.min.js即可。安装方法：

<script type="text/javascript" src="qrcode.min.js"></script>

项目结构

1、HTML部分

我们需要我们的应用能够接收用户输入的二维码信息，比如网址或其他文本内容，添加：

<label> <span>文本/网址</span>
        <input type="text" id="text">
</label>

最好也可以让用户自定义二维码尺寸：

<label> <span>大小/px</span>
        <input type="number" id="qrcode-size" min="10" max="1000" step="10" value="100">
</label>

然后添加一个动作按钮，用来生成二维码：

<button type="button" onClick="generateCode()">生成</button>

2、JavaScript部分

首先根据id获取<input>元素的引用：

var elText = document.getElementById("text");
var qrcode_size=document.getElementById("qrcode-size");

进行简单的验证，以保证参数非空：

if (!elText.value)
{
    alert("请填写文本/网址内容");
    elText.focus();
    return;
}

if (!qrcode_size.value)
{
    alert("请填写尺寸参数");
    qrcode_size.focus();
    return;
}

根据所获得的参数构造QR码对象：

var qrcode = new QRCode(document.getElementById("image-qrcode"),
    {
        text : elText.value,
        width : qrcode_size.value,
        height : qrcode_size.value,
        //容错能力设为H档次，最高
        correctLevel : QRCode.CorrectLevel.H
    }
    );

生成二维码：

qrcode.makeCode();

页面美化

为了使页面更像一个完整的应用，就需要对页面进行美化。

最终效果：

二维码生成器

这部分不再讲解，看代码即可：

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>二维码生成器</title>
<link rel="stylesheet" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/qrcode.min.js"></script>
</head>

<body>
<!-- 内容区域 -->
<div class="qrcode-generator"> 
  
  <!-- 参数填写区域 -->
  <div class="qrcode-parameter"> 
    
    <!-- 白色背景区 -->
    <div class="area-white-background">
      <div class="title-row">
        <h1>二维码生成器</h1>
      </div>
      <div class="parameter-row">
        <label> <span>文本/网址</span>
          <input type="text" id="text">
        </label>
      </div>
      <div class="parameter-row">
        <label> <span>大小/px</span>
          <input type="number" id="qrcode-size" min="10" max="1000" step="10" value="100">
        </label>
      </div>
      <div class="parameter-row">
        <button type="button" onClick="generateCode()">生成</button>
      </div>
    </div>
    <!-- 白色背景区结束 -->
    
    <!-- 页脚区 -->
    <footer> 
    &copy;2017-代码的荣耀:<a href="http://www.icoder.top/">http://www.icoder.top/</a>——版权所有 
    </footer>
    <!-- 页脚区结束 -->
    
  </div>
  <!-- 参数填写区域结束 -->
  
  <!-- 二维码生成区域 -->
  <div class="image-area" id="image-qrcode"> </div>
  
</div>
<!-- 内容区域结束 -->

<script type="text/javascript">	
function generateCode () {	
	//清空二维码区域，否则重复点击会多次生成
	document.getElementById("image-qrcode").innerHTML="";
	
	var elText = document.getElementById("text");
	var qrcode_size=document.getElementById("qrcode-size");
	
	if (!elText.value) {
		alert("请填写文本/网址内容");
		elText.focus();
		return;
	}
	
	if (!qrcode_size.value) {
		alert("请填写尺寸参数");
		qrcode_size.focus();
		return;
	}
	
	var qrcode = new QRCode(document.getElementById("image-qrcode"), {
	text:elText.value,
	width : qrcode_size.value,
	height : qrcode_size.value,
  //容错能力设为H档次，最高
  correctLevel : QRCode.CorrectLevel.H 
    });
	
	//生成二维码
	qrcode.makeCode();
}	
</script>

</body>
</html>

style.css

html {
	background-color: #f3f3f3;
}

footer a {
	text-decoration: none;
}

.qrcode-generator {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	font: bold 14px sans-serif;
	text-align: center;
}

.qrcode-parameter {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
	text-align: center;
}

.qrcode-parameter .area-white-background {
	width: 570px;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	padding: 60px 80px;
	margin-bottom: 32px;
}

.qrcode-parameter .parameter-row {
	text-align: left;
	margin-bottom: 23px;
}

.qrcode-parameter .title-row {
	text-align: center;
	margin-bottom: 60px;
}

.qrcode-parameter h1 {
	display: inline-block;
	box-sizing: border-box;
	color: #4c565e;
	font-size: 24px;
	padding: 0 30px 15px;
	border-bottom: 2px solid #6caee0;
	margin: 0;
}

.qrcode-parameter .parameter-row > label span {
	display: inline-block;
	box-sizing: border-box;
	color: #5f5f5f;
	width: 125px;
	text-align: right;
	padding-right: 25px;
}

.qrcode-parameter input {
	color: #5f5f5f;
	box-sizing: border-box;
	width: 230px;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	padding: 12px 18px;
	border: 1px solid #dbdbdb;
}

.qrcode-parameter button {
	display: block;
	border-radius: 2px;
	background-color: #6caee0;
	color: #ffffff;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	padding: 15px 35px;
	border: 0;
	margin: 55px auto 0;
	cursor: pointer;
}

.qrcode-parameter button:hover {
	background-color: blue;
}

.image-area {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	text-align: center;
	margin-top: 70px;
}

/*响应式设计*/

@media (max-width: 900px) {
	
.qrcode-generator {
	margin: 20px auto;
}
	
.qrcode-parameter {
	position: relative;
	display: block;
	margin: 0 0 50px;
}
	
.qrcode-parameter .area-white-background {
	margin: 0 auto 32px;
}
	
.image-area {
	margin-top: 60px;
}
	
}

@media (max-width: 600px) {
	
.qrcode-parameter .area-white-background {
	width: 300px;
	padding-left: 35px;
	padding-right: 35px;
}
	
.qrcode-parameter .parameter-row > label span {
	display: block;
	text-align: left;
	padding: 0 0 10px;
}
	
}

完整项目地址：https://github.com/zhangrj/JS-QRCode