H5移动版识别二维码和条形码

原创已于 2022-07-13 10:33:38 修改 · 2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#webqr.js

于 2022-07-07 10:02:43 首次发布

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在H5移动版中实现二维码和条形码的识别，内容涵盖PC和移动端的兼容性处理，包括引入webqr.js库及用户授权回调函数的使用。

H5移动版识别二维码和条形码（PC和移动端都兼容）

一.需要引入JS文件

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/DecoderWorker.js"></script>
	<script type="text/javascript" src="js/exif.js"></script>
	<script type="text/javascript" src="js/BarcodeReader.js"></script>
	<script type="text/javascript" src="js/llqrcode.js"></script>
	<script type="text/javascript" src="js/webqr.js"></script>

项目下载地址

二.Html文件

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="QR Code scanner">
  <meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript">
  <meta name="language" content="English">
  <meta name="copyright" content="Lazar Laszlo (c) 2011">
  <meta name="Revisit-After" content="1 Days">
  <meta name="robots" content="index, follow">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<title></title>
<style type="text/css">
.imghelp{
  width: 100%;
  z-index:100;
  opacity: 0;
}
.selector{
  cursor:pointer;
}
.btn {
	width: 290px;
	border: 1px #000 solid;
	position: absolute;
}
ul{
  margin-bottom:0;
  margin-right:40px;
}
li{
  display:inline;
  padding-right: 0.5em;
  padding-left: 0.5em;
  font-weight: bold;
  border-right: 1px solid #333333;
}
li a{
  text-decoration: none;
  color: black;
}
.tsel{
    padding:0;
}
.hide {
  display: none;
}
.border {
  border:1px #000 solid;
}
</style>
</head>

<body>
	<div id="main">
		<div id="header">
		  <p id="mp1">
		  </p>
		</div>
		<div id="mainbody" style="display: inline;">
		  <table class="tsel" border="0" width="100%">
			<tbody>
			  <tr>
				<td valign="top" align="center" width="50%">
				  <table class="tsel" border="0">
					<tbody>
					  <tr>
						<td><img class="selector hide" id="webcamimg" onClick="setwebcam()" align="left" style="opacity: 1;"></td>
						<td>
						  <img class="selector hide" id="qrimg"  onClick="setimg()" align="right" style="opacity: 0.2;">
						</td>
					  </tr>
					  <tr>
						<td colspan="2" align="center">
						  <div id="outdiv">
							<div id="qrfile"><canvas id="out-canvas" class="border" width="290"></canvas>
								<div class="imghelp">
									  <div class="btn">点击选择二维码</div>
									  <input class="imghelp" type="file" onChange="handleFiles(this.files)"/>
								</div>
							</div>
						  </div>
						</td>
					  </tr>
					</tbody>
				  </table>
				</td>
			  </tr>
			  <tr>
				<td colspan="3" align="center">
				  <img class="hide" >
				</td>
			  </tr>
			  <tr>
				<td colspan="3" align="center">
				  <div>
					<span>
						扫描结果:
					</span><input type="text"  id="result">
				  </div>
				</td>
			  </tr>
			</tbody>
		  </table>
		</div>
	</div>
	<canvas id="qr-canvas"></canvas>
	<!--条形码-->
	<input type="file" style="display:none" id="barCode" capture="camera" accept="image/*" mutiple="mutiple" capture="camera" />
	<div class="m-12" style="width: 100%;display: flex;justify-content: center;align-content: center;flex-direction: column;">
		<div style="width: 300px;margin: 0 auto;">
			<img id="img" class="mt-12" width="300" height="180" style="display:block;text-align: center;" />
			<p class="codeInfo"></p>
			<button type="button" onClick="$('#barCode').click()"  style="width: 300px;">点击识别条形码</button>
		</div>
	</div>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/DecoderWorker.js"></script>
	<script type="text/javascript" src="js/exif.js"></script>
	<script type="text/javascript" src="js/BarcodeReader.js"></script>
	<script type="text/javascript" src="js/llqrcode.js"></script>
	<script type="text/javascript" src="js/webqr.js"></script>
	<script type="text/javascript">
		load();
		function login () {
			var hostSn = document.getElementById('result').value;
		};
		$(function() {
			compatibleInput();
			var timeStart = '';
			var timeEnd = '';
			BarcodeReader.Init();
			BarcodeReader.SetImageCallback(function(result) {
				console.dir(result);
				if(!result.length) {

					$(".codeInfo").html('条形码读取失败');
					return
				}
				var barcode = result[0];
				if(barcode.Value) {
					$(".codeInfo").html('扫描结果:' + barcode.Value);
				}
				timeStart1 = new Date()
				console.log(timeStart1)
				var date3 = timeStart1.getTime() - timeStart.getTime() //时间差的毫秒数
			});
			document.querySelector("#barCode").addEventListener('change', function(evt) {
				timeStart = new Date()
				console.log(timeStart)
				var file = evt.target.files[0];
				reader = new FileReader();
				console.log(reader)
				reader.onloadend = function() {
					var img = new Image();
					img.src = reader.result;
					console.log(img)
					BarcodeReader.DecodeImage(img);
				}
				console.log(file)
				//			$('#img').attr('src', window.createObjectURLcre(file))   ;   
				reader.readAsDataURL(file);
				img.src = URL.createObjectURL(file)

			}, false);
		});
		// 判断当前是否属于ios移动端，兼容input同时调用手机相册和相机
		function compatibleInput(){
			  //获取浏览器的userAgent,并转化为小写
			  var ua = navigator.userAgent.toLowerCase();
			  //判断是否是苹果手机，是则是true
			  var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
			  if (isIos) {
				$("input:file").removeAttr("capture");
			};
		}
	</script>
</body>
</html>