使用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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JavaScript函数基础详解
Feb 03 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 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
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
详解Python核心对象类型字符串
2018/02/11 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
基于python实现简单日历
2018/07/28 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
工程安全员岗位职责
2014/03/09 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
《刷子李》教学反思
2016/02/20 职场文书