使用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 前台切换网站的样式实现
Jun 22 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
JS如何生成随机验证码
Mar 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
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
Javascript的比较汇总
2016/07/25 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
js实现随机8位验证码
2020/07/24 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
使用python实现tcp自动重连
2017/07/02 Python
详解python pandas 分组统计的方法
2019/07/30 Python
pytest中文文档之编写断言
2019/09/12 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
《太阳》教学反思
2014/02/21 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
健康状况证明书
2014/11/26 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
Python图像处理之图像拼接
2021/04/28 Python
pytorch--之halfTensor的使用详解
2021/05/24 Python