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. OpenResty的现状、趋势、使用及学习方法

    Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM 嵌入到 Nginx 中,实现了 OpenResty 这个高性能服务端解决方案. 通过 OpenRest ...

  2. 20175236 2018-2019-2 《Java程序设计》第七周学习总结

    教材学习内容总结 String类 String类在java.lang包中的类被默认引入,因此程序可以直接使用String类 Java把String类定义为final类,因此用户不能扩展String类, ...

  3. three.js使用base64 图片创建Texture纹理

    下面使用的是literallycanvas绘图,然后获取绘图结果为base64内容 var lc = LC.init( document.getElementById('canvas-output') ...

  4. [UE4]重构Grab和Drop

    一.在前面的实例中是把Grab和Drop逻辑放到SimVRHand手柄对象里面,从面向对象来看,Grab和Drop逻辑应该放在被抓取的对象中,因为可能每个对象被抓取后要执行的Grab和Drop逻辑都不 ...

  5. 事务回滚 SET XACT_ABORT ON

    USE tempdb IF OBJECT_ID ('dbo.test') IS NOT NULL DROP TABLE dbo.test GO CREATE TABLE dbo.test ( id I ...

  6. Linux裸设备管理详解--

    裸设备概述 裸设备:也叫裸分区(原始分区),是一种没有经过格式化,不被Unix/Linux通过文件系统来读取的特殊字符设备.裸设备可以绑定一个分区,也可以绑定一个磁盘.字符设备:对字符设备的读写不需要 ...

  7. 分布式 基本理论 BASE

    比起CAP的生硬来, 我更加喜欢BASE.BASE 显得更加好理解.尽管BASE 这个名字本身有迎合语言习惯的恶臭味,为什么不是缩写为 BaSsEc 呢? 其实大部分系统是可以 同时 CAP 的, 因 ...

  8. JConsole监控Linux上的Tomcat

    JConsole监控Linux上的Tomcat 从Java 5开始引入了 JConsole,来监控 Java 应用程序性能和跟踪 Java 中的代码.jconsole是JDK自带监控工具,只需要找到 ...

  9. 20164304姜奥——Exp1 PC平台逆向破解

    1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,ge ...

  10. Bootstrap字体无法显示

    下载的font文件没有放进你的项目文件里.