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. soapui的简单使用

    工具下载地址:https://www.soapui.org/downloads/soapui.html 名词解释 https://www.cnblogs.com/fcfblog/p/5830205.h ...

  2. 工控随笔_07_西门子_WinCC利用命令行实现操作log日志

    在WinCC中可以通过报警纪录来实现操作员纪录,这个需要WinCC的消息系统进行组态和配置. 利用消息系统进行实现上诉功能不但复杂而且时间久啦也不方便查询.那么有没有一种简单的方法来 实现操作员纪录呢 ...

  3. webRTC中音频相关的netEQ（四）：控制命令决策

    上篇(webRTC中音频相关的netEQ(三):存取包和延时计算)讲了语音包的存取以及网络延时和抖动缓冲延时的计算,MCU也收到了DSP模块发来的反馈报告.本文讲MCU模块如何根据网络延时.抖动缓冲延 ...

  4. @EnableEurekaServer无法正常import原因是spring-cloud-dependencies版本太低

    去maven repository 库里 http://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-depend ...

  5. su: Authentication failure问题

    问题: su命令不能切换root,提示错误su: Authentication failure 解决: 使用命令 sudo passwd root 下次再su的时候只要输入密码就可以成功登录了.

  6. Java中的“==操作符”和equals方法有什么区别

    Java中的"=="和equals方法究竟有什么区别? 1.==操作符 "=="操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的 ...

  7. ZooKeeper是按照CP原则构建的,不适合做Service服务发现

    一.cap 分布式领域中存在CAP理论,且该理论已被证明:任何分布式系统只可同时满足两点,无法三者兼顾. ①C:Consistency,一致性,数据一致更新,所有数据变动都是同步的. ②A:Avail ...

  8. [URLSession sessionWithConfiguration:config delegate:self delegateQueue:[NSOperationQueue mainQueue]

    NSURLSessionConfiguration *config = [NSURLSessionConfiguration defaultSessionConfiguration]; _sessio ...

  9. linux centos 中访问linux 共享文件方法

    mount -t cifs -o username="administrator",password="" //192.168.1.101/cp /mnt/nt ...

  10. ubuntu 下安装mulval

    怎么在虚拟机下安装ubuntu这里就不多说了 ubuntu怎么安装静态ip可以参考:https://www.cnblogs.com/braveym/p/8640563.html ubuntu安装jdk ...