使用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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
js实现石头剪刀布游戏
Oct 11 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编写发红包程序
2015/07/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
express文件上传中间件Multer详解
2016/10/24 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python科学画图代码分享
2017/11/29 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python实现飞机大战游戏
2020/10/26 Python
python取余运算符知识点详解
2019/06/27 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
Java的五个基础面试题
2016/02/26 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
百年校庆节目主持词
2014/03/27 职场文书
投资合作协议书
2014/04/17 职场文书
文明市民先进事迹
2014/05/15 职场文书
门面房租房协议书
2014/12/01 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
公司年会主持词范文!
2019/05/07 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技