使用quaggaJS識別圖片中的條形碼

時間 2019-12-05

標籤使用 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("未識別到圖片中的條形碼！");
                }
            });
        }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。