quaggaJS是一个纯JS的插件，用于识别图片中的条形码，很方便。一般用于移动端拍照识别，也可以在网页端上传图片识别。

github下载地址

首先要指定正确格式的条形码，常见的条形码编码类型有EAN和CODE128。

另外，并不是所有图片中的条形码都可以被识别出来，而且正确率也不是100%。

下面是识别网页上传图片中条码的方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<section id="container" class="container">

 <div class="controls">

   <fieldset class="input-group">

     <input type="file" accept="image/*;capture=camera">

        <button id="btnIdents">识别</button>

   </fieldset>

 </div>

 <div id="interactive" class="viewport"><br clear="all"></div>

</section>

<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>

<script src="./js/quagga.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./css/fileinput.css">

<script src="./js/file_input.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {var App = {

        init: function() {

            App.attachListeners();

        },

        attachListeners: function() {

            var self = this;

            $("#btnIdents").on("click", function(e) {

                var input = document.querySelector(".controls input[type=file]");

                if (input.files && input.files.length) {

                    App.decode(URL.createObjectURL(input.files[0]));

                }

            });

        },

        decode: function(src) {

            var self = this,

                config = $.extend({}, self.state, {src: src});

            Quagga.decodeSingle(config, function(result) {

                //识别结果

                if(result.codeResult){

                    console.log(result.codeResult.code);

                    alert("图片中的条形码为：" + result.codeResult.code);

                }else{

                    alert("未识别到图片中的条形码！");

                }

            });

        },

        state: {

            inputStream: {

                size: 800,

                singleChannel: false

            },

            locator: {

                patchSize: "medium",

                halfSample: true

            },

            decoder: {

                readers: [{

                    format: "code_128_reader",

                    config: {}

                }]

            },

            locate: true,

            src: null

        }

    };

    App.init();

});

</script>

</body>

</html>

运行效果

补充：上面的代码主要是参考了官方的demo，后来又按自己的习惯写了一遍，也贴上来。运行效果是一样的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<section id="container" class="container">

 <div class="controls">

   <fieldset class="input-group">

     <input type="file" accept="image/*;capture=camera">

        <button id="btnIdents">识别</button>

   </fieldset>

 </div>

 <div id="interactive" class="viewport"><br clear="all"></div>

</section>

<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>

<script src="./js/quagga.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./css/fileinput.css">

<script src="./js/file_input.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function() {

            $("#btnIdents").click(function() {

            var input = document.querySelector(".controls input[type=file]");

            if (input.files && input.files.length) {

                decode(URL.createObjectURL(input.files[0]));

            }

            });

});

function decode(src){

      var config = {

            inputStream: {

            size: 800,

            singleChannel: false

            },

            locator: {

                patchSize: "medium",

                halfSample: true

               },

             decoder: {

                readers: [{

                     format: "code_128_reader",

                     config: {}

                    }]

                },

             locate: true,

              src: src

       }

       Quagga.decodeSingle(config, function(result) {

                if(!result){

                   alert("图片中没有条形码！");

                   return false;

                }

                //识别结果

                if(result.codeResult){

                    console.log("图片中的条形码为："+result.codeResult.code);

                    alert("图片中的条形码为：" + result.codeResult.code);

                }else{

                    alert("未识别到图片中的条形码！");

                }

       });

}

</script>

</body>

</html>

另外，如果不是文件上传的话，可以传图片的url进行识别。

        function decode(img_url) {

            var config = {

                readers: ["code_128_reader"],

                locate: true,

                src : img_url

            }

            Quagga.decodeSingle(config, function (result) {

                console.log("decoding...");

                if (!result) {

                    console.log("图片中没有条形码！");

                    return false;

                }

                //识别结果

                if (result.codeResult) {

                    console.log("图片中的条形码为：" + result.codeResult.code);

                } else {

                    console.log("未识别到图片中的条形码！");

                }

            });

        }

使用quaggaJS识别图片中的条形码的更多相关文章

  1. Opencv+Zbar二维码识别（标准条形码/二维码识别）

    使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...

  2. 如何用ABBYY FineReader识别图片中的文本

    ABBYY FineReader 12是一款OCR光学字符识别软件,能够快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的文本,让电脑处理更具效率,摆脱从前的烦恼,告别耗时费力 ...

  3. Android识别图片中脸部信息

    在Android开发中,大部分应用都是以用户为第一位,用户都有自己的个人中心,用来展示自己的信息,头像无疑是展示自己最直观的方式,随着各种政策的出台,实名认证,真人头像变得尤为重要,如果要求上传真人头 ...

  4. Python通过百度Ai识别图片中的文字

    版本:python3.7 工作中有需要识别图片中的汗字,查看了半天大神们的博客,但没找到完全可以用的源码,经过自己的实践,以下源码可以实现: 创建应用 首先你需要登录百度AI,选择文字识别,创建一个应 ...

  5. 深入学习使用ocr算法识别图片中文字的方法

    公司有个需求,简单点说需要从一张图片中识别出中文,通过python来实现,当然其他程序也行,只要能实现,而小编主要学习python,所以就提了python.一个小白在网上遨游了一天,终于找到一丝丝思绪 ...

  6. numpy 构建深度神经网络来识别图片中是否有猫

    目录 1 构建数据 2 随机初始化数据 3 前向传播 4 计算损失 5 反向传播 6 更新参数 7 构建模型 8 预测 9 开始训练 10 进行预测 11 以图片的形式展示预测后的结果 搭建简单神经网 ...

  7. 超详细的编码实战，让你的springboot应用识别图片中的行人、汽车、狗子、喵星人（JavaCV+YOLO4）

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  8. 使用face_recognition批量识别图片中的人数

    #使用face_recognition实现从图片中选中人数并分别输出txtimport face_recognition import cv2 import os fin = 'D:\\Users\\ ...

  9. 识别图片中文字（百度AI）

     这个是百度官方的文档         https://ai.baidu.com/docs#/OCR-API/top    通用的文字识别,如果是其他的含生僻字/含位置信息的版本,请参考官方的文档,只 ...

随机推荐

  1. g2o

    高翔博士 g2o的代码框架 https://www.cnblogs.com/gaoxiang12/p/5304272.html 图优化理论和g2o的引入 https://www.cnblogs.com ...

  2. BT.656

    转自http://www.cnblogs.com/s_agapo/archive/2012/04/08/2437775.html 凡是做模拟信号采集的,很少不涉及BT.656标准的,因为常见的模拟视频 ...

  3. Windows10上桌面共享

    Windows自带的桌面共享软件 命令行输入: Msra.exe

  4. XPath定位时，使用文本的方法小技巧。

    1)//td[text()= "{0}" ]  #这是一种非常常用的定位方法,具体例子使用如下: __keyboard = '//td[text()= "{0}" ...

  5. 51nod1220 约数之和

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1220 $G(n)=\sum\limits_{i=1}^n\sum\lim ...

  6. Android Studio无法识别手机

    1.代理配置 1.1 无FQ的网络:需要配置代理: 1.2 公司网:不需要配置代理: 2.检查驱动安装情况: 2.1 检查设备管理器中的驱动是否正常安装: 成功后: 3.手机开启开发者模式

  7. 生产者消费者synchronized wait notify

    package ProduceQueueProduce; import java.util.Queue; public class ProducerThread extends Thread { pu ...

  8. To be taught if i am fortunate

    此博客算是我自娱自乐的海洋球池吧. 由于我十分的菜并且文笔拙劣,所以您可能并不能在这找到什么有用的信息或者好玩的东西(或者exciting的内容). 如果您能指出我的一些错误,我将十分感激.

  9. 检查邮箱IP是否在国际反垃圾邮件组织的黑名单中

    有时候邮件发不出去,很有可能就是邮件服务器的IP被国际上一些反垃圾组织列入黑名单了,这时你可以通过返回的邮件判断是否进入黑名单,或者通过以下查询地址看是否被列入,然后一个个申请移除: http://m ...

  10. Allegro16.6 PCB 导入DXF 外框后曲线不闭合

    Allegro16.6 PCB 导入DXF  外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...