欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

使用JavaScript根据图片获取条形码的方法

程序员文章站 2022-05-26 09:04:59
最近在弄一个零售超市的项目，但是苦于需要自己录入数据，超市少的也有1000多种商品，自己一个一个录入肯定不太现实，所以考虑扫描商品的条形码，根据条形码获取商品的信息这样效率...

最近在弄一个零售超市的项目，但是苦于需要自己录入数据，超市少的也有1000多种商品，自己一个一个录入肯定不太现实，所以考虑扫描商品的条形码，根据条形码获取商品的信息这样效率就高多了。

根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高，可以直接拿来用，这里就略过了。

这里重点说说javascript识别图片中的条形码。

开源库quaggajs

项目地址：https://github.com/serratus/quaggajs

这里要感谢大神提供这么牛b的js库，让我的想法得以实现！

这个库的使用方式也非常简单，在github上有很丰富的讲解，但是我只使用了其中一个扫描条形码图片，获取条形码的功能，所以我就直接把我需要的功能列举一个例子，有其他的需求的可以去上面的连接里面找。

页面部分

<html>
<body>
<section id="container" class="container">
 <div class="controls">
   <fieldset class="input-group">
     <input type="file" accept="image/*;capture=camera">
     <button>rerun</button>
   </fieldset>
 </div>
 <div id="result_strip">
  <ul class="thumbnails"></ul>
 </div>
 <div id="interactive" class="viewport"><canvas class="imgbuffer" width="800" height="566"></canvas><canvas class="drawingbuffer" width="800" height="566"></canvas><br clear="all"></div>
</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 = $('<li><div class="thumbnail"><div class="imgwrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
        $node.find("img").attr("src", canvas.todataurl());
        $node.find("h4.code").html(code);
        $("#result_strip ul.thumbnails").prepend($node);
      });
    }
  });
});

效果展示

使用JavaScript根据图片获取条形码的方法

以上所述是小编给大家介绍的使用javascript根据图片获取条形码的方法，希望对大家有所帮助

上一篇： JavaScript实现三级联动效果

下一篇： jQuery动画_动力节点节点Java学院整理

推荐阅读