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


Posted in Javascript onJuly 04, 2017

最近在弄一个零售超市的项目,但是苦于需要自己录入数据,超市少的也有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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 #Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 #Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python中的迭代器漫谈
2015/02/03 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python中操作符重载用法分析
2016/04/29 Python
python实现机器学习之元线性回归
2018/09/06 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
卖车协议书
2014/04/21 职场文书
团干部培训方案
2014/06/03 职场文书
社区节水倡议书
2015/04/29 职场文书
在职证明格式样本
2015/06/15 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
Python 语言实现六大查找算法
2021/06/30 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Nginx报404错误的详细解决方法
2022/07/23 Servers