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

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>

注意事项:

webqr.js 手机端访问用户授权或者拒绝回调函数

H5移动版识别二维码和条形码_第1张图片

你可能感兴趣的:(前端,webqr.js)