Home > Article > Web Front-end > How to get barcode from image using JavaScript

How to get barcode from image using JavaScript

不言Original: 2018-07-03 10:24:452633browse

This article focuses on introducing JavaScript to recognize barcodes in pictures. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it

I am currently working on a retail supermarket project. However, you need to enter the data yourself. There are even a few supermarkets with more than 1,000 products. It is definitely not practical to enter them one by one by yourself. Therefore, it is much more efficient to consider scanning the barcode of the product and obtaining the product information based on the barcode.

Obtaining product information based on barcodes. There are many APIs on the Internet. Generally, the fee is not high and can be used directly. I will skip it here.

Here we focus on JavaScript recognition of barcodes in images.

Open source library quaggaJS

Project address: https://github.com/serratus/quaggaJS

Thanks here The master provided such a great js library, so that my idea can be realized!

The use of this library is also very simple. There are rich explanations on github, but I only used one of the functions of scanning barcode pictures and obtaining barcodes, so I just listed the functions I need. For an example, if you have other needs, you can find it in the link above.

Page part

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

$(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="How to get barcode from image using 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);
      });
    }
  });
});

Effect display

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Native JS Canvas code to implement the backgammon game

jquery to achieve the horizontal scrolling effect of images

The above is the detailed content of How to get barcode from image using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript jquery JS canvas github https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Native JS+Canvas code to implement backgammon gameNext article：Native JS+Canvas code to implement backgammon game

See more

How to get barcode from image using JavaScript

Related articles