使用quaggaJS识别图片中的条形码

quaggaJS是一个纯JS的插件，用于识别图片中的条形码，很方便。通常用于移动端拍照识别，也能够在网页端上传图片识别。javascript

首先要指定正确格式的条形码，常见的条形码编码类型有EAN和CODE128。html

另外，并非全部图片中的条形码均可以被识别出来，并且正确率也不是100%。java

下面是识别网页上传图片中条码的方法。jquery

<!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>

运行效果git

补充：上面的代码主要是参考了官方的demo，后来又按本身的习惯写了一遍，也贴上来。运行效果是同样的。github

<!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进行识别。this

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("未识别到图片中的条形码！"); } }); }