使用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 操作select下拉列表框的一点小经验
Mar 20 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
小程序中手机号识别的示例
Dec 14 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判断图片格式的七种方法小结
2013/06/03 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
营销专业应届生求职信
2013/11/26 职场文书
单位创先争优活动方案
2014/01/26 职场文书
承诺书格式
2014/06/03 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
清明节主题班会
2015/08/14 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
DE1103使用报告
2022/04/05 无线电
mysql 排序失效
2022/05/20 MySQL