使用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 相关文章推荐
jQuery DOM操作实例
Mar 05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python语言的优势是什么
2020/06/17 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
大学四年规划书范文
2013/12/27 职场文书
法律专业自荐信
2014/06/03 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
道歉短信大全
2015/05/12 职场文书
行政处罚告知书
2015/07/01 职场文书
婚宴父亲致辞
2015/07/27 职场文书
车位出租协议书范本
2016/03/19 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
mysql left join快速转inner join的过程
2021/06/30 MySQL