专业编程基础技术教程

网站首页 > 基础教程 正文

js扫描识别条形码（js实现扫一扫）

ccvgpt 2025-01-23 15:40:59 基础教程 8 ℃

常用的条形码类型：EAN， CODE 128，CODE 39，EAN 8，UPC-A ，UPC-C ，I2of5， 2of5，CODE 93和CODABAR

由于项目中手机端h5页面需要新增一个功能：扫描条形码识别内容并回填。

js扫描识别条形码（js实现扫一扫）

但是考虑到手机Html页面及js无法支持扫码功能，考虑实现思路为先通过js调用手机的照相机功能进行拍照，然后再通过拍照后的照片进行解析，获得条形码数据。

通过网上一番搜索，找到了一个QuaggaJS插件，是专门抓取条形码数据的，所以根据现有的思路和这插件配合起来实现，具体代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条形码</title>
	<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
	<script src="./quagga.min.js" type="text/javascript"></script>
	<script src="barcode.js" type="text/javascript"></script>
	<style>
	.container{
		margin:0 auto;
		width:600px;
		height:300px;
		text-align:center;
	}
	.preview{
		width:500px;
		height:300px;
		margin:10px auto;
		border:1px solid red;
	}
	.preview img{
		/*
		width: auto;  
		height: auto;  
		max-width: 100%;  
		max-height: 100%;     
		*/
		width:500px;
		height:300px;
	}  
	input{
		width:100px;
		height:50px;
		font-size:20px;
	}
	</style>
</head>
<body>

<div class="container">
	<input type="file" accept="image/*" capture="camera" id="camera" style="display:none;"> 
	<div class="preview">
		<img />
	</div>
	<input type="button" value="扫描" id="scan"/>
</div>

</body>
</html>

barcode.js

    
$(function() {var App = {
        init: function() {
            App.attachListeners();
			//App.initCanvas();
        },
        attachListeners: function() {
            var self = this;
			
            $("#scan").on("click", function(e) {
               $("#camera").click();
            });
			$("#camera").on("change", function(e) {
				
                var reader = new FileReader();
				reader.onload = function (e) {
					//console.log(this.result);
					$(".preview img").attr("src",this.result);
				};
				console.log(this.files[0]);
				reader.readAsDataURL(this.files[0]);
				App.decode(URL.createObjectURL(this.files[0]));
				
            });
        },
        decode: function(src) {
            var self = this,
                config = $.extend({}, self.state, {src: src});
            Quagga.decodeSingle(config, function(result) {
                //识别结果
                if(result && result.codeResult){
                    console.log(result.codeResult.code);
                    alert("图片中的条形码为：" + result.codeResult.code);
                }else{
                    alert("未识别到图片中的条形码！");
                }
            });
        },
        state: {
            inputStream: {
                size: 1280,
                singleChannel: false
            },
            locator: {
                patchSize: "medium",
                halfSample: true
            },
            decoder: {
                /*readers: [{
                    format: "code_128_reader",
                    config: {}
                }]*/
				readers: ["ean_reader","code_128_reader"]
            },
            locate: true,
            src: null
        },
		toFile:function (dataurl, filename) { //将base64转换为文件
			
			var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
			while(n--){
				u8arr[n] = bstr.charCodeAt(n);
			}
			//return new File([u8arr], filename, {type:mime});
			return new Blob([u8arr],{type:mime});
		},
		getImgToBase64:function (url,callback){ //将图片转换为Base64
			  var canvas = document.getElementById('canvas'),
				ctx = canvas.getContext('2d'),
				img = new Image;
			  img.crossOrigin = 'Anonymous';
			  img.onload = function(){
				canvas.height = img.height;
				canvas.width = img.width;
				ctx.drawImage(img,0,0);
				var dataURL = canvas.toDataURL('image/jpeg');
				callback(dataURL);
				canvas = null;
			  };
			img.src = url;
		},
		take:function(){
			let canvas = document.getElementById("canvas");
			let context = canvas.getContext("2d");
			context.drawImage(video, 0, 0, 640, 480);
		},
		initCanvas:function(){
			let video = document.getElementById("video");
			let canvas = document.getElementById("canvas");
			let context = canvas.getContext("2d");

			// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
			if (navigator.mediaDevices === undefined) {
				navigator.mediaDevices = {};
			}

			// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
			// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
			if (navigator.mediaDevices.getUserMedia === undefined) {
				navigator.mediaDevices.getUserMedia = function (constraints) {

					// 首先，如果有getUserMedia的话，就获得它
					var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

					// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
					if (!getUserMedia) {
						return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
					}

					// 否则，为老的navigator.getUserMedia方法包裹一个Promise
					return new Promise(function (resolve, reject) {
						getUserMedia.call(navigator, constraints, resolve, reject);
					});
				}
			}

			//默认使用前摄像头，强制使用后置摄像头如下设置
			// let constraints = {video: { facingMode: { exact: "environment" } }};
			let constraints = {video: true};
			navigator.mediaDevices.getUserMedia(constraints)
				.then(function (stream) {
					// 旧的浏览器可能没有srcObject
					if ("srcObject" in video) {
						video.srcObject = stream;
					} else {
						// 防止在新的浏览器里使用它，应为它已经不再支持了
						video.src = window.URL.createObjectURL(stream);
					}
					video.onloadedmetadata = function (e) {
						video.play();
					};
				})
				.catch(function (err) {
					console.log(err.name + ": " + err.message);
				});
		}
    };

    App.init();
});

想支持多种类型的条形码识别，配置readers即可，此方案在安卓手机上和部分苹果手机上可行，其他特殊机型未试验。

参考文档：https://www.cnblogs.com/YuTaiYin/p/7343831.html

Tags：

猜你喜欢

最近发表
标签列表