html5 js(Javascript-Barcode-Reader)实现上传图片或拍照识别条形码的功能

废话不多说，先描述一下场景：本案例是通过图片上传或者拍照上传来识别出图片上条形码的内容。

调研发现目前 识别条形码推荐最多的两个js库分别是   quagga.js 和  barcode-reader，这里我选择barcode-record 因为看了两个文档对比发现后者实现起来更方便效率上也更高效点。

习惯性附一下：javascript-barcode-reader 的npm地址：https://www.npmjs.com/package/javascript-barcode-reader，GitHub地址：https://github.com/mubaidr/Javascript-Barcode-Reader

代码如下：

页面中需要引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>

 

html部分：

       

        <input type="file" style="display:none" id="barCode" 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: 140px;margin: 0 auto;">
				<button type="button" onclick="$('#barCode').click()"  style="width: 140px;">点击拍照上传图片</button>
				<img id="img" class="mt-12" width="140" height="140" style="border-radius: 50%;display:block;text-align: center;" />
				<p class="codeInfo mt-12" style="color: red;font-size: 16px;text-align: center;"></p>
				<p class="time mt-24 fs-18 text-center"></p>
			</div>
		</div>

js部分：

<script>
 

<script>
	$(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() //时间差的毫秒数
			$(".time").html('共用时：' + date3 + '毫秒')
		});
		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>

到此即完成了。后续会继续更新扫描直接识别出二维码及条形码功能。