使用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 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
python如何定义带参数的装饰器
2018/03/20 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
医学生自我鉴定范文
2014/03/26 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
民主评议党员个人总结
2015/02/13 职场文书
承诺书模板大全
2015/05/04 职场文书
三下乡活动心得体会
2016/01/23 职场文书