JavaScriptを使用して画像からバーコードを取得する方法-jsチュートリアル-php.cn

JavaScriptを使用して画像からバーコードを取得する方法

不言

リリース： 2018-07-03 10:24:45

オリジナル

2613 人が閲覧しました

この記事は、画像内のバーコードを認識するための JavaScript の導入に焦点を当てています。コードは非常に優れており、必要な方は参考にしてください。

私は現在、小売スーパーマーケットのプロジェクトに取り組んでいます。 , しかし、自分でデータを入力するのは大変です。1,000点を超える商品を扱うスーパーマーケットもいくつかあります。それを自分で1つずつ入力するのは現実的ではないため、商品のバーコードをスキャンして商品情報を取得することを検討してください。バーコードを使用すると、はるかに効率的になります。

バーコードに基づいて商品情報を取得するための API はインターネット上に多数ありますが、一般に料金は高くないので、ここでは省略します。

ここでは、画像内のバーコードの JavaScript 認識に焦点を当てます。

オープンソースライブラリquaggaJS

プロジェクトアドレス: https://github.com/serratus/quaggaJS

私のアイデアを実現できるように、このような素晴らしいjsライブラリを提供してくれたマスターに感謝したいと思います！

このライブラリの使い方も非常に簡単で、githubに豊富な説明がありますが、私はバーコード画像をスキャンしてバーコードを取得する機能の1つだけを使用したため、他のニーズのために必要な機能をリストしました。、上記のリンクから見つけることができます。

ページ部分

<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);
      });
    }
  });
});

ログイン後にコピー

エフェクト表示