通过查资料发现,QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库,qrcode这个库只通过前端就能生成二维码和解析二维码图片。
首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c6.zip;
下载好的文件目录结构如图,将红框中的js文件导入自己的项目中
通过开发编辑器建立一个基本的html文档,将刚刚下载的js文件和jQuery文件引入进来,
通过bootstrap实现一下简单的布局,bootstrap使用在线引入的方式,因为生成二维码和识别二维码再同一个页面,所以简单的使用了一下bootstrap的栅格系统进行了一下布局
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
通过调用qrcode.js里的函数就能实现将文本识别生成二维码
也可以将二维码保存成图片进行识别
具体的布局可以根据自己的喜好进行布局,只要调用库里的函数便能识别和生成二维码,这里只是实现了一下简单的布局,进行了案例的演示,具体的代码实现如下:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<title>二维码生成与识别</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{text-align: center;}
.btn1{
margin: 10px;
}
.panel{width: 200px;
margin: 10px auto;
}
#outdiv
{
width:500px;
height:500px;
}
#qrfile{
width:290px;
height:270px;
position: relative;
}
#out-canvas {
margin-top: 40px;
/* border: solid ;
border-width: 1px 1px 1px 1px;
border-color: brown;*/
}
#imghelp input{
position:absolute;
left:0;
top:0;
bottom: 0;
width: 100%;
z-index:100;
font:18px arial,sans-serif;
background:#f0f0f0;
padding-top:10px;
padding-bottom:10px;
border-radius:20px;
opacity: 0;
}
#uploadText {
position:absolute;
left:0;
top:30px;
bottom: 0;
width: 100%;
z-index:99;
font:18px arial,sans-serif;
padding-top:10px;
padding-bottom:10px;
margin: 0;
-webkit-appearance: none;
}
#result{
border: solid;
border-width: 1px 1px 1px 1px;
border-color: #ccc;
width:290px;
height: 35px;
outline: none;
box-shadow: none;
-webkit-appearance: none;
}
</style>
<!-- 识别二维码引用的js库 -->
<script type="text/javascript" src="./js/llqrcode.js"></script>
<!--<script type="text/javascript" src="./qr/plusone.js" gapi_processed="true"></script>-->
<script type="text/javascript" src="./js/webqr.js"></script>
</head>
<body>
<!-- <link rel="stylesheet" href="css/buttons.css"> -->
<div class="container">
<div class="row">
<!-- 生成二维码模块 -->
<div class="col-md-5" >
<h4 style="color: skyblue">生成二维码</h4>
<!-- 文本框 -->
<textarea id="contents" cols="33" rows="10" placeholder="输入内容即可生成二维码" style="margin: 5px"></textarea><br>
<!-- 识别按钮 -->
<button type="button" class="btn btn-success btn1" onclick="generateQRCode()">点击按钮生成二维码</button>
<!-- 错误信息提示 -->
<div id="message"></div>
<!-- 成功生成二维码显示的面板标题 -->
<div class="panel panel-primary" style="display: none;" id="1">
<div class="panel-heading">
<h3 class="panel-title">成功生成的二维码</h3>
</div>
</div>
<!-- 二维码 -->
<div id="qrcode"></div>
</div>
<!-- 识别二维码模块 -->
<div class="col-md-5 col-md-offset-2" >
<div id="outdiv">
<div id="qrfile">
<h4 style="color: skyblue">识别二维码图片</h4>
<div style="border:1px solid;height: 220px ; width: 290px;margin-bottom: 50px" >
<canvas id="out-canvas" width="290" height="220"></canvas>
</div>
<div id="imghelp">
<p id="uploadText">点击选择本地二维码图片</p>
<input type="file" id="fileBtn" onchange="handleFiles(this.files)"/>
</div>
<div >
<span style="color: green;">识别二维码的结果为:</span>
<input type="text" id="result">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
<canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 生成二维码调用的js库 -->
<script src="./js/qrcode.js"></script>
<script src="./js/jquery.qrcode.js"></script>
<script>
// 生成二维码函数
function generateQRCode(){
var contents=$('#contents').val();
if ($("canvas")) {
$("canvas").remove();
}
if (contents ===""){
$('#message').text("文本框为空,请输入内容");
$('#message').css('color','red');
$('#message').css('font-size','20px')
return;
}
$('#1').css('display','block');
jQuery('#qrcode').qrcode({
text: contents
});
}
// 二维码识别函数
function load()
{
if(isCanvasSupported() && window.File && window.FileReader)
{
initCanvas(800, 600);
qrcode.callback = read;
document.getElementById("mainbody").style.display="inline";
setwebcam();
}
else
{
document.getElementById("mainbody").style.display="inline";
document.getElementById("mainbody").innerHTML='<p id="mp1"></p><br>'+
'<br><p id="mp2">抱歉,您的浏览器不支持该识别二维码方法</p><br><br>'+
'<p id="mp1">请使用 <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> 或 <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> 或 <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>';
}
}
</script>
</body>
</html>
实现效果如下: