使用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 相关文章推荐
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
bootstrap table单元格新增行并编辑
May 19 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
js实现带箭头的进度流程
Mar 26 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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 memcache扩展的三种安装方法
2009/04/26 PHP
php开发环境配置记录
2011/01/14 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
学习jquery之一
2007/04/27 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
Js四则运算函数代码
2012/07/21 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
原生js实现放大镜
2017/02/20 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
详解python解压压缩包的五种方法
2019/07/05 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python如何写try语句
2020/07/14 Python
迪奥官网:Dior.com
2018/12/04 全球购物
会计自荐书
2013/12/02 职场文书
境外导游求职信
2014/02/27 职场文书
三项教育活动实施方案
2014/03/30 职场文书
一年级学生期末评语
2014/04/21 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
收入证明怎么写
2015/06/12 职场文书
增值税发票丢失证明
2015/06/19 职场文书
婚宴领导致辞
2015/07/28 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python