使用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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
浅析vue-router实现原理及两种模式
Feb 11 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php 魔术函数使用说明
2010/02/21 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP getName()函数讲解
2019/02/03 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
js charAt的使用示例
2014/02/18 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
python发送邮件实例分享
2017/07/28 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
任意存:BOXFUL
2018/05/21 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
八一演出活动方案
2014/02/03 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
实习证明格式范文
2015/06/16 职场文书
会计入职心得体会
2016/01/22 职场文书
七年级作文之环保作文
2019/10/17 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫