使用quaggaJS识别图片中的条形码
quaggaJS是一个纯JS的插件,用于识别图片中的条形码,很方便。一般用于移动端拍照识别,也可以在网页端上传图片识别。
首先要指定正确格式的条形码,常见的条形码编码类型有EAN和CODE128。
另外,并不是所有图片中的条形码都可以被识别出来,而且正确率也不是100%。
下面是识别网页上传图片中条码的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="container" class="container">
<div class="controls">
<fieldset class="input-group">
<input type="file" accept="image/*;capture=camera">
<button id="btnIdents">识别</button>
</fieldset>
</div>
<div id="interactive" class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css">
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {var App = {
init: function() {
App.attachListeners();
},
attachListeners: function() {
var self = this;
$("#btnIdents").on("click", function(e) {
var input = document.querySelector(".controls input[type=file]");
if (input.files && input.files.length) {
App.decode(URL.createObjectURL(input.files[0]));
}
});
},
decode: function(src) {
var self = this,
config = $.extend({}, self.state, {src: src});
Quagga.decodeSingle(config, function(result) {
//识别结果
if(result.codeResult){
console.log(result.codeResult.code);
alert("图片中的条形码为:" + result.codeResult.code);
}else{
alert("未识别到图片中的条形码!");
}
});
},
state: {
inputStream: {
size: 800,
singleChannel: false
},
locator: {
patchSize: "medium",
halfSample: true
},
decoder: {
readers: [{
format: "code_128_reader",
config: {}
}]
},
locate: true,
src: null
}
};
App.init();
});
</script>
</body>
</html>
运行效果
补充:上面的代码主要是参考了官方的demo,后来又按自己的习惯写了一遍,也贴上来。运行效果是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="container" class="container">
<div class="controls">
<fieldset class="input-group">
<input type="file" accept="image/*;capture=camera">
<button id="btnIdents">识别</button>
</fieldset>
</div>
<div id="interactive" class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css">
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btnIdents").click(function() {
var input = document.querySelector(".controls input[type=file]");
if (input.files && input.files.length) {
decode(URL.createObjectURL(input.files[0]));
}
});
});
function decode(src){
var config = {
inputStream: {
size: 800,
singleChannel: false
},
locator: {
patchSize: "medium",
halfSample: true
},
decoder: {
readers: [{
format: "code_128_reader",
config: {}
}]
},
locate: true,
src: src
}
Quagga.decodeSingle(config, function(result) {
if(!result){
alert("图片中没有条形码!");
return false;
}
//识别结果
if(result.codeResult){
console.log("图片中的条形码为:"+result.codeResult.code);
alert("图片中的条形码为:" + result.codeResult.code);
}else{
alert("未识别到图片中的条形码!");
}
});
}
</script>
</body>
</html>
另外,如果不是文件上传的话,可以传图片的url进行识别。
function decode(img_url) {
var config = {
readers: ["code_128_reader"],
locate: true,
src : img_url
}
Quagga.decodeSingle(config, function (result) {
console.log("decoding...");
if (!result) {
console.log("图片中没有条形码!");
return false;
}
//识别结果
if (result.codeResult) {
console.log("图片中的条形码为:" + result.codeResult.code);
} else {
console.log("未识别到图片中的条形码!");
}
});
}