使用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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
H5实现手机拍照和选择上传功能
Dec 18 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
谈一谈收音机的高放电路
2021/03/02 无线电
PHP分页显示制作详细讲解
2006/10/09 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
小程序实现分类页
2019/07/12 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python实现目录树生成示例
2014/03/28 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
利用python批量检查网站的可用性
2016/09/09 Python
flask应用部署到服务器的方法
2019/07/12 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python新手学习函数默认参数设置
2020/06/03 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
某公司.Net方向面试题
2014/04/24 面试题
《夹竹桃》教学反思
2014/04/20 职场文书
个人综合鉴定材料
2014/05/23 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
求职简历自荐信
2014/06/18 职场文书
顶岗实习计划书
2015/01/16 职场文书
建国大业观后感
2015/06/01 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书