使用JavaScript生成二维码

时间：2021-12-18 08:42:41

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

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

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

使用JavaScript生成二维码

生成二维码的方式有很多，像服务器端脚本语言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>

项目结构

使用JavaScript生成二维码

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();

页面美化

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

最终效果：

使用JavaScript生成二维码

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

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

标签：

相关文章