quagga.js识别条形码的用法

最新推荐文章于 2024-04-24 16:59:09 发布

面壁思过程

最新推荐文章于 2024-04-24 16:59:09 发布

阅读量5.5k

点赞数 1

分类专栏： js 文章标签：前端识别条形码

本文链接：https://blog.csdn.net/Candy_mi/article/details/90211488

版权

js 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

日常碰到的问题

8 篇文章 0 订阅

订阅专栏

使用到的插件 quagga.js

官方链接:https://serratus.github.io/quaggaJS/

部分代码如下

<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.9.0.min.js"></script>

<script src="./quagga.js" type="text/javascript"></script>
<script  type="text/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: "code_128_reader",    // ean_reader 这里指定ean条形码，就是国际13位的条形码   code39    code_128
            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);
      });
    }
  });
});
</script>
</body>
</html>

面壁思过程

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
quagga.js识别条形码的用法

使用到的插件 quagga.js官方链接:https://serratus.github.io/quaggaJS/部分代码如下<html><body><section id="container" class="container"> <div class="controls"> <fieldset clas...
复制链接

扫一扫