Vu3+QuaggaJs实现web页面识别条形码

一、什么是QuaggaJs

QuaggaJS是一个基于JavaScript的开源图像识别库，可用于识别条形码。

QuaggaJs的作用主要体现在以下几个方面：

  1. 实时图像处理与识别：QuaggaJs是一款基于JavaScript的开源库，它允许在Web浏览器中实现实时的图像处理与识别功能。这意味着用户无需安装任何额外的软件或插件，即可在网页上直接进行条形码扫描。
  2. 条形码扫描与解析：QuaggaJs的核心功能是条形码扫描。它支持多种条形码格式，包括但不限于EAN、UPC、Code128等。通过扫描条形码，QuaggaJs可以快速解析出条形码中的信息，从而为用户提供便捷的数据交互体验。
  3. 无缝集成到Web应用：由于QuaggaJs是基于JavaScript开发的，因此它可以轻松地集成到各种Web应用中。开发者只需简单的几行代码，就可以将条形码扫描功能添加到自己的网页中，为用户提供更加丰富的交互体验。
  4. 优化性能与用户体验：QuaggaJs在设计时充分考虑了性能优化。例如，它通过自适应调整帧率和检测区域大小来减少不必要的计算资源消耗。此外，QuaggaJs还使用了Web Workers进行复杂的图像分析任务，以保持主线程的流畅性，避免页面卡顿，从而提升用户体验。
  5. 广泛的应用场景：QuaggaJs因其强大的功能和便捷性而被广泛应用于多个领域。例如，在电商平台上，用户可以使用QuaggaJs扫描商品条形码来快速查询商品信息和下单购买；在物流管理中，它可以帮助实现货物追踪和库存管理。

二、QuaggaJs核心方法

QuaggaJs的核心方法主要包括以下几个：

  1. Quagga.init()：

    • 这个方法是用来初始化QuaggaJs的。在这个方法中，你可以配置各种参数，如输入流类型（LiveStream用于实时视频流或ImageStream用于处理图片）、解码器设置、以及用于显示扫描结果的HTML元素等。

  2. Quagga.start()：

    • 当库被初始化后，这个方法用于启动视频流，并开始定位和解码图像。它是开始扫描过程的关键方法。

  3. Quagga.stop()：

    • 如果解码器当前正在运行，调用这个方法会停止解码器，并且不再处理任何图像。这个方法用于在不再需要扫描时停止扫描过程，释放资源。

  4. Quagga.onProcessed(callback)：

    • 该方法注册一个回调函数，该函数会在每个帧被处理完成后被调用。回调函数接收一个包含操作成功或失败详细信息的对象。这个方法允许开发者对每一帧的处理结果进行响应。

  5. Quagga.onDetected(callback)：

    • 这个方法注册一个回调函数，当条形码图案被成功定位和解码时，该函数会被触发。传递的回调函数会接收一个包含解码处理信息的对象，其中最重要的是可以通过该对象获取检测到的代码。这个方法使得开发者能够在条形码被成功识别时执行特定的操作。

三、在Vue3项目中使用

1、安装

npm install quagga --save

2、在模板中定义容器

1）定义视频输入容器

<div id="interactive" class="viewport"></div>

2）定义css样式

#interactive.viewport {
  width: 640px;
  height: 480px;
  canvas, video {
    float: left;
    width: 640px;
    height: 480px;
  }
  canvas.drawingBuffer, video.drawingBuffer {
    margin-left: -640px;
  }
}

3、在组件中定义调用方法

1）在组件中导入类库

import Quagga from 'quagga';

2）增加启动方法，初始化视频组件

const startScanning = () => {
    const options = {
    inputStream: {
      debug: { showCanvas: true, showPatches: true, showFoundPatches: true, drawBoundingBox: true, drawScanline: true },
      type : "LiveStream",
      target: "#interactive", // 可以指定视频输出的容器，也可以不设置会自动查找 class=viewport的元素作为容器
      constraints: {
        width: {min: 640},
        height: {min: 480},
        facingMode: "environment",
        aspectRatio: {min: 1, max: 2}
      }
    },
    locator: {
      patchSize: "medium",
      halfSample: true
    },
    numOfWorkers: 4,
    frequency: 10,
    decoder: {
      readers : ["code_128_reader","ean_reader","ean_8_reader","code_39_vin_reader","codabar_reader"]
    },
    locate: true
  }

  Quagga.init(options, function(err) {
    if (err) {
      console.error(err)
      return
    }
    
    // 注册结果收集器，在识别到结果时打印到控制台
    let resultCollector  = Quagga.ResultCollector.create({
      capture: true,
      capacity: 20,
      blacklist: [{
        code: "WIWV8ETQZ1", format: "code_93"
      }, {
        code: "EH3C-%GU23RK3", format: "code_93"
      }],
      filter: function (codeResult) {
        // only store results which match this constraint
        // e.g.: codeResult
        console.log('codeResult',codeResult)
        return true;
      }
    });
    Quagga.registerResultCollector(resultCollector);
    // -- 注册结果收集器 end

    Quagga.onDetected(function(result) {
      // 识别到结果，打印数据
      console.log('resultCollector',resultCollector.getResults())
    });

    Quagga.start();
    console.log("Initialization finished. Ready to start");

  });

  // 处理识别过程数据，在视频图像上画线/画框
  Quagga.onProcessed(function(result) {
    const drawingCtx = Quagga.canvas.ctx.overlay,
        drawingCanvas = Quagga.canvas.dom.overlay;
    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
        result.boxes.filter(function (box) {
          return box !== result.box;
        }).forEach(function (box) {
          Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
        });
      }

      if (result.box) {
        Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
      }

      if (result.codeResult && result.codeResult.code) {
        Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
      }
    }
  });

};

3、效果示例

1）识别过程中

在这里插入图片描述
2）识别到条形码数据

在这里插入图片描述

3）结果数据

在这里插入图片描述

四、QuaggaJs支持的条码类型

  1. code_128: Code 128 是一种高密度的条形码符号体系，它可以用来表示 ASCII 00 到 ASCII 127 之间的全 ASCII 字符集，因此非常灵活。这种条形码广泛用于库存管理、物流、资产管理等多个领域

  2. EAN（European Article Number）: EAN条码，也称为国际商品条码，是用于在全球范围内唯一标识商品的条码系统。它通常用于零售商品的标识和追踪。

  3. EAN-8: EAN-8是EAN条码的一种缩短版本，由8位数字组成。由于其长度较短，它通常用于小型商品或包装空间有限的商品。

  4. Code 39: Code 39是一种常用的条形码格式，可以对字母和数字进行编码。它是一种可变的长度条码，广泛应用于工业、物流和其他领域。

  5. Code 39 VIN: Code 39 VIN是专门为车辆识别号码（Vehicle Identification Number, VIN）设计的Code 39条码变种。VIN码是用于识别汽车特定信息的编码。

  6. Codabar: Codabar是一种较老的条形码类型，主要用于图书馆、医疗保健和航空票务等领域。它能够编码数字和一些特定的符号。

  7. UPC (Universal Product Code): UPC条码主要在美国和加拿大使用，用于零售商品的标识。它通常出现在商品的包装上，以便在销售点进行扫描。

  8. UPC-E: UPC-E是UPC条码的一个压缩版本，用于小型商品标签，其中只有必要的数字被编码以缩短条码长度。

  9. I2of5 (Interleaved 2 of 5): I2of5或ITF（Interleaved Two of Five）条码是一种连续的、自校验的、高密度的条码格式，主要用于物流和仓储。

  10. 2of5 (Standard 2 of 5): Standard 2 of 5条码主要用于工业应用，特别是在仓库和货运中跟踪货物。它只能编码数字，并且密度较低。

  11. Code 93: Code 93是一种高密度的条形码，可以编码全部的ASCII字符集。与Code 39相似，但密度更高，且包含更多的字符。它通常用于需要高密度和广泛字符集的应用场景。

参考

  • https://github.com/serratus/quaggaJS

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/574212.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ASP.NET Core 3 高级编程(第8版) 学习笔记 03

ASP.NET Core 3 高级编程(第8版) 学习笔记 03

本篇介绍原书的第 18 章&#xff0c;为 19 章 Restful Service 编写基础代码。本章实现了如下内容&#xff1a; 1&#xff09;使用 Entity Framework Core 操作 Sql Server 数据库 2&#xff09;Entity Framework Core 数据库迁移和使用种子数据的方法 3&#xff09;使用中间件…
阅读更多...
Qt Quick centerIn和fill 的用法

Qt Quick centerIn和fill 的用法

1&#xff09;Qt Quick centerIn和fill 的用法&#xff1a; import QtQuick 2.5 Rectangle { width:300; height:200; Rectangle { color: "blue"; anchors.fill: parent; border.width: 6; border.co…
阅读更多...
详解工业网关在线探测功能及用途

详解工业网关在线探测功能及用途

工业网关专为工业物联网应用设计&#xff0c;可实现包括不同通讯协议之间的兼容和转换&#xff0c;提供软硬件加密保障工业数据安全传输&#xff0c;发挥强大算力实现数据边缘预处理&#xff0c;联动联调工业网络设备实现高效协同等。在线探测功能是佰马工业网关的一项重要功能…
阅读更多...
unity学习（89）——unity塞满c盘！--删除editor下的log文件

unity学习（89）——unity塞满c盘！--删除editor下的log文件

卸了一个视频后强制续命打开详细信息&#xff1a; 这个再往下找也是没用的&#xff01; 显示隐藏文件夹后&#xff01;执行如下操作&#xff01; 30个g&#xff01; 其中unity占23g editer占了21g 删除C:\Users\王栋林\AppData\Local\Unity\Editor下的log文件 恢复到之前的水…
阅读更多...
使用 Flask 和 WTForms 构建一个用户注册表单

使用 Flask 和 WTForms 构建一个用户注册表单

在这篇技术博客中&#xff0c;我们将使用 Flask 和 WTForms 库来构建一个用户注册表单。我们将创建一个简单的 Flask 应用&#xff0c;并使用 WTForms 定义一个注册表单&#xff0c;包括用户名、密码、确认密码、邮箱、性别、城市和爱好等字段。我们还将为表单添加验证规则&…
阅读更多...
【C 数据结构】图

【C 数据结构】图

文章目录 【 1. 基本原理 】1.1 无向图1.2 有向图1.3 基本知识 【 2. 图的存储结构 】2.1 完全图2.2 稀疏图和稠密图2.3 连通图2.3.1 (普通)连通图连通图 - 无向图非连通图 的 连通分量 2.3.2 强连通图强连通图 - 有向图非强连通有向图 的 强连通分量 2.3.3 生成树 - 连通图2.3…
阅读更多...
美区视频带货“一哥”，一周销量狂干三十万美金！

美区视频带货“一哥”，一周销量狂干三十万美金！

“超店有数显示&#xff0c;Tybuggy上周带货狂揽34.3万美金&#xff0c;超出第二名近30倍。” TikTok风波再起&#xff0c;4月17日&#xff0c;美众议院推出援乌援以军事议案&#xff0c;值得注意的是&#xff0c;TikTok剥离法案被“打包”夹带其中&#xff0c;以此加大再参议…
阅读更多...
LLM应用实战：当KBQA集成LLM(二)

LLM应用实战：当KBQA集成LLM(二)

1. 背景 又两周过去了&#xff0c;本qiang~依然奋斗在上周提到的项目KBQA集成LLM&#xff0c;感兴趣的可通过传送门查阅先前的文章《LLM应用实战&#xff1a;当KBQA集成LLM》。 本次又有什么更新呢&#xff1f;主要是针对上次提到的缺点进行优化改进。主要包含如下方面&#…
阅读更多...
【Linux笔记】基本指令（一）

【Linux笔记】基本指令（一）

一道残阳铺水中 半江瑟瑟半江红 目录 Linux基本指令 罗列目录内容&#xff1a;ls 指令 显示当前目录位置信息&#xff1a;pwd 指令 切换工作目录&#xff1a;cd 指令 创建文件修改时间戳&#xff1a;touch指令 创建空目录&#xff1a;mkdir指令 删除空目录&#xff1a;rmdir指…
阅读更多...
1.3K Star我上位机项目中用了这个开源项目

1.3K Star我上位机项目中用了这个开源项目

软件介绍 ClientServerProject的软件是一款基于C-S&#xff08;客户端-服务器&#xff09;架构的通用开发框架&#xff0c;为中小型系统的快速开发提供强大的支持。该框架由服务端、客户端以及公共组件三部分组成&#xff0c;不仅提供了基础的账户管理、版本控制、软件升级、公…
阅读更多...
输入法重大漏洞曝光，仅华为幸免，近10亿用户受影响

输入法重大漏洞曝光，仅华为幸免，近10亿用户受影响

近日&#xff0c;Citizenlab研究人员调查了多家厂商的输入法应用安全漏洞并报告称&#xff1a;除华为以外&#xff0c;百度、荣耀、科大讯飞、OPPO、三星、腾讯、Vivo和小米等供应商的九款应用程序中有八款均存在安全漏洞。 随着用户规模的不断增长&#xff0c;云输入法应用的…
阅读更多...
kubernetes中DaemonSet控制器

kubernetes中DaemonSet控制器

一、概念 使用DaemonSet控制器&#xff0c;相当于在节点上启动了一个守护进程。通过DaemonSet控制器可以确保在每个节点上运行Pod的一个副本。如果有心的node节点加入集群&#xff0c;则DaemonSet控制器会自动给新加入的节点增加一个Pod的副本&#xff1b;反之&#xff0c;当有…
阅读更多...
GPT的全面历史和演变：从GPT-1到GPT-4

GPT的全面历史和演变：从GPT-1到GPT-4

人工智能新篇章&#xff1a;GPT-4与人类互动的未来&#xff01; 本文探讨了生成式预训练 Transformer (GPT) 的显着演变&#xff0c;提供了从开创性的 GPT-1 到复杂的 GPT-4 的旅程。 每次迭代都标志着重大的技术飞跃&#xff0c;深刻影响人工智能领域以及我们与技术的互动。 我…
阅读更多...
vmware虚拟机网络“桥接模式”与“NAT模式”的联网原理及linux环境下IP配置指引

vmware虚拟机网络“桥接模式”与“NAT模式”的联网原理及linux环境下IP配置指引

一、vmware虚拟机网络“桥接模式”与“NAT模式”的区别 选中虚拟机》设置》网络适配器&#xff0c;打开虚拟机设置面板 我们看到网络连接处有多个选项&#xff0c;今天良哥通过试验告诉你“桥接模式”和“NAT模式”的联网原理、区别及两种模式下IP地址配置的详细方法。 桥接模…
阅读更多...
YOLOv9改进策略 | 添加注意力篇 | LSKAttention大核注意力机制助力极限涨点 (附多个位置添加教程)

YOLOv9改进策略 | 添加注意力篇 | LSKAttention大核注意力机制助力极限涨点 (附多个位置添加教程)

一、本文介绍 本文给大家带来的改进机制是LSKAttention大核注意力机制应用于YOLOv9。它的主要思想是将深度卷积层的2D卷积核分解为水平和垂直1D卷积核&#xff0c;减少了计算复杂性和内存占用。接着&#xff0c;我们介绍将这一机制整合到YOLOv9的方法&#xff0c;以及它如何帮…
阅读更多...
面试经典150题——路径总和

面试经典150题——路径总和

​ 1. 题目描述 2. 题目分析与解析 2.1 思路一 注意题目的关键点&#xff1a;判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;起点是root&#xff0c;终点是叶子节点。 那么我们就可以从根节点按照层序遍历的方式&#xff0c;从根节点从根到 叶子不断对路径进行加…
阅读更多...
MPC的横向控制与算法仿真实现

MPC的横向控制与算法仿真实现

文章目录 1. 引言2. 模型预测控制&#xff08;MPC&#xff09;2.1 基础知识2.2 MPC的整体流程2.3 MPC的设计求解 3. 车辆运动学MPC设计4. 算法和仿真实现 1. 引言 随着智能交通系统和自动驾驶技术的发展&#xff0c;车辆的横向控制成为了研究的热点。横向控制指的是对车辆在行…
阅读更多...
vue3环境搭建

vue3环境搭建

环境准备&#xff1a; node环境(node.js官网)npm环境 上述两个环境存在版本要求所以安装最新的靠谱&#xff08;旧的环境存在不支持现象&#xff09; windows电脑 安装完node.js会带有npm mac电脑本身自带node和npm&#xff0c;但是需要升级 进入到你想创建前端项目的文件夹:…
阅读更多...
C++初识内存管理和模版

C++初识内存管理和模版

目录 前言 1.C/C内存分布 2. C的内存管理方式 2.1 new/delete操作内置类型 2. new和delete操作自定义类型 3. operator new和operator delete函数 4. new和delete的实现原理 4.1 内置类型 4.2 自定义类型 5. malloc/free和new/delete的区别 6. 初识模版 6.1 泛型编…
阅读更多...
【python笔记】datafram的时间动态可视化 pyecharts地图

【python笔记】datafram的时间动态可视化 pyecharts地图

import pandas as pd# 假设DataFrame是这样的&#xff1a; df pd.DataFrame({ year: [2014, 2015, 2016, 2014, 2015, 2016, 2014, 2015, 2016], province: [广东省, 广东省, 河南省, 湖南省, 北京市, 北京市, 上海市, 新疆维吾尔自治区, 上海市], values: [100, 150, 75…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站