使用JavaScript生成二维码和识别二维码_js二维码识别

作者：盐析白兔 | 2024-05-16 00:59:12

踩

js二维码识别

通过查资料发现，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>

实现效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/575921