脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 根据图片获取条形码

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

 更新时间：2017年07月04日 17:14:17   作者：一抹丶阳  
本文重点给大家介绍JavaScript识别图片中的条形码，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

最近在弄一个零售超市的项目，但是苦于需要自己录入数据，超市少的也有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根据图片获取条形码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序使用自定义组件导航实现当前页面高亮

    微信小程序使用自定义组件导航实现当前页面高亮

    这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript实现百度搜索框效果

    JavaScript实现百度搜索框效果

    这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果
    ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • TypeScript类型断言VS类型守卫示例详解

    TypeScript类型断言VS类型守卫示例详解

    这篇文章主要为大家介绍了TypeScript类型断言VS类型守卫示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 全面解析JavaScript中的valueOf与toString方法(推荐)

    全面解析JavaScript中的valueOf与toString方法(推荐)

    本文给大家介绍JavaScript中的valueOf与toString方法，valueOf() 方法可返回 Boolean 对象的原始值，toString() 方法可把一个逻辑值转换为字符串，并返回结果。对js中valueof和tostring相关知识感兴趣的朋友一起学习吧
    2016-06-06
  • javascript实现鼠标拖动改变层大小的方法

    javascript实现鼠标拖动改变层大小的方法

    这篇文章主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 原生JS实现瀑布流插件

    原生JS实现瀑布流插件

    本篇文章给大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解，对此有兴趣的读者们参考学习下吧。
    2018-02-02
  • JS Jquery 遍历,筛选页面元素 自动完成(实现代码)

    JS Jquery 遍历,筛选页面元素 自动完成(实现代码)

    本篇文章是对JS Jquery 遍历,筛选页面元素 自动完成的实现代码进行了详细的分析介绍，需要的朋友参考下
    2013-07-07
  • input框中的name和id的区别

    input框中的name和id的区别

    这篇文章主要介绍了input框中的name和id的区别介绍，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 小程序使用watch监听数据变化的方法详解

    小程序使用watch监听数据变化的方法详解

    这篇文章主要介绍了小程序使用watch监听数据变化的方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 小程序数据通信方法大全(推荐)

    小程序数据通信方法大全(推荐)

    这篇文章主要介绍了小程序数据通信方法大全，文中详细的介绍了小程序页面、组件之间的三种关系进行通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论