首頁  >  文章  >  web前端  >  使用JavaScript根據圖片取得條碼的方法

使用JavaScript根據圖片取得條碼的方法

不言
不言原創
2018-07-03 10:24:452611瀏覽

本文將重點介紹JavaScript識別圖片中的條碼,程式碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧

最近在弄一個零售超市的項目,但苦於需要自己錄入數據,超市少的也有1000多種商品,自己一個一個錄入肯定不太現實,所以考慮掃描商品的條碼,根據條碼獲取商品的信息這樣效率就高多了。

根據條碼取得商品資訊這個在網路上有很多api一般都是付費的費用不高,可以直接拿來用,這裡就略過了。

這裡重點介紹JavaScript辨識圖片中的條碼。

開源程式庫quaggaJS

#專案位址:https://github.com/serratus/quaggaJS

#這裡要感謝大神提供這麼牛B的js庫,讓我的想法得以實現!

這個函式庫的使用方式也非常簡單,在github上有很豐富的講解,但是我只使用了其中一個掃描條碼圖片,獲取條碼的功能,所以我就直接把我需要的功能列舉一個例子,有其他的需求的可以去上面的連結裡面找。

頁面部分

<html>
<body>
<section id="container" class="container">
 <p class="controls">
   <fieldset class="input-group">
     <input type="file" accept="image/*;capture=camera">
     <button>Rerun</button>
   </fieldset>
 </p>
 <p id="result_strip">
  <ul class="thumbnails"></ul>
 </p>
 <p id="interactive" class="viewport"><canvas class="imgBuffer" width="800" height="566"></canvas><canvas class="drawingBuffer" width="800" height="566"></canvas><br clear="all"></p>
</section>
<script src="jquery-1.11.0.min.js"></script>
<script src="quagga.min.js" type="text/javascript"></script>
<script src="file_input.js" type="text/javascript"></script>
</body>
</html>

JavaScript部分

$(function() {
   $(".controls button").on("click", function(e) {
    var input = document.querySelector(".controls input[type=file]");
    if (input.files && input.files.length) {
      Quagga.decodeSingle({
        inputStream: {
          size: 800 // 这里指定图片的大小,需要自己测试一下
        },
        locator: {
          patchSize: "medium",
          halfSample: false
        },
        numOfWorkers: 1,
        decoder: {
          readers: [{
            format: "ean_reader",// 这里指定ean条形码,就是国际13位的条形码
            config: {}
          }]
        },
        locate: true,
        src: URL.createObjectURL(input.files[0])
      }, function(result) {
         var code = result.codeResult.code,
          $node,
          canvas = Quagga.canvas.dom.image;
        // 将扫描得到的条形码打印出来
        $node = $(&#39;<li><p class="thumbnail"><p class="imgWrapper"><img  / alt="使用JavaScript根據圖片取得條碼的方法" ></p><p class="caption"><h4 class="code"></h4></p></p></li>&#39;);
        $node.find("img").attr("src", canvas.toDataURL());
        $node.find("h4.code").html(code);
        $("#result_strip ul.thumbnails").prepend($node);
      });
    }
  });
});

效果顯示

使用JavaScript根據圖片取得條碼的方法

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

原生JS Canvas實作五子棋遊戲的程式碼

jquery實作圖片層級捲動的效果

#

以上是使用JavaScript根據圖片取得條碼的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn