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.: codeResultconsole.log('codeResult',codeResult)return true;}});Quagga.registerResultCollector(resultCollector);// -- 注册结果收集器 endQuagga.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.mzph.cn/news/828670.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LORA详解

LORA详解

参考论文&#xff1a; low rank adaption of llm 背景介绍&#xff1a; 自然语言处理的一个重要范式包括对一般领域数据的大规模预训练和对特定任务或领域的适应处理。在自然语言处理中的许多应用依赖于将一个大规模的预训练语言模型适配到多个下游应用上。这种适配通常是通过…
阅读更多...
初识reactor响应式编程

初识reactor响应式编程

起源 Reactor响应式编程起源于数据流和变化的传播概念&#xff0c;其核心概念是由底层的执行模型通过数据流自动传播变化。这种编程范式最早由.NET平台上的Reactive Extensions (Rx)库实现&#xff0c;后来迁移到Java平台后&#xff0c;产生了著名的RxJava库&#xff0c;并衍生…
阅读更多...
DiT论文精读Scalable Diffusion Models with Transformers CVPR2023

DiT论文精读Scalable Diffusion Models with Transformers CVPR2023

Scalable Diffusion Models with Transformers CVPR2023 Abstract idea 将UNet架构用Transformer代替。并且分析其可扩展性。 并且实验证明通过增加transformer的宽度和深度&#xff0c;有效降低FID 我们最大的DiT-XL/2模型在classconditional ImageNet 512、512和256、256基…
阅读更多...
小程序AI智能名片S2B2C商城系统：四大主流商业模式深度解析与实战案例分享

小程序AI智能名片S2B2C商城系统：四大主流商业模式深度解析与实战案例分享

在私域电商迅速崛起的大背景下&#xff0c;小程序AI智能名片S2B2C商城系统以其独特的商业模式和强大的功能&#xff0c;正成为品牌商们争相探索的新领域。在这一系统中&#xff0c;拼团模式、会员电商、社区团购和KOC营销等四种主流模式&#xff0c;为品牌商提供了多样化的营销…
阅读更多...
【文章转载】Lance Martin的关于RAG的笔记

【文章转载】Lance Martin的关于RAG的笔记

转载自微博黄建同学 从头开始学习 RAG&#xff0c;看Lance Martin的这篇笔记就行了&#xff0c;包含了十几篇论文和开源实现&#xff01; —— 这是一组简短的&#xff08;5-10 分钟视频&#xff09;和笔记&#xff0c;解释了我最喜欢的十几篇 RAG 论文。我自己尝试实现每个想…
阅读更多...
C# GetField 方法应用实例

C# GetField 方法应用实例

目录 关于 C# Type 类 GetField 方法应用 应用举例 心理CT设计题 类设计 DPCT类实现代码 小结 关于 C# Type 类 Type表示类型声明&#xff1a;类类型、接口类型、数组类型、值类型、枚举类型、类型参数、泛型类型定义&#xff0c;以及开放或封闭构造的泛型类型。调用 t…
阅读更多...
WPS-EXCEL:快速删除多个线条对象

WPS-EXCEL:快速删除多个线条对象

问题图 我需要将线条快速删除 方法一:使用定位对象功能 使用定位功能&#xff1a;按Ctrl G打开定位对话框。在对话框中&#xff0c;点击“定位条件”。 定位对象&#xff1a;在定位条件对话框中&#xff0c;勾选“对象”选项&#xff0c;然后点击“确定”。这样&#xff0c;…
阅读更多...
CTF之变量1

CTF之变量1

拿到题目发现是一个php代码&#xff0c;意思是用get方式获取args参数。 至于下面那个正则表达式怎么绕过暂且不知&#xff0c;但是题目最上面告诉我们lag In the variable ! &#xff08;意思是flag就在变量中&#xff09;。 那我们就传入全局变量globals&#xff08;&#xf…
阅读更多...
spring引入外部属性文件

spring引入外部属性文件

spring引入外部属性文件 有时候我们并不想把所有的配置信息都放到spring的配置文件中&#xff0c;这样的话也不太好维护&#xff0c;比如说数据库的信息 <bean name"dataSource" class"com.alibaba.druid.pool.DruidDataSource" init-method"init&…
阅读更多...
vue调用post方法并且后端代码需要接收ids

vue调用post方法并且后端代码需要接收ids

首先在ts文件里接收一个参数 data&#xff0c;类型为对象。该函数通过调用 post 函数向指定的路径接口 发送数据 export function calculateScore(data: object) {return post(写你的接口, data) }//以上为举例&#xff0c;calculateScore等会会在vue页面去调用然后我这里做处…
阅读更多...
【构建|Gradle】Gradle常见使用问题集锦

【构建|Gradle】Gradle常见使用问题集锦

文章目录 1. 更新Gradle仓库或者迁移本地Maven仓库后报错2. Gradle配置使用mavenLocal()后，假如添加新的依赖，在Maven仓库中不可见3. 取消使用idea+Gradle创建项目时自动生成.main结尾的子module文章持续更新中。。。 1. 更新Gradle仓库或者迁移本地Maven仓库后报错 错误信息…
阅读更多...
【Python】模拟windows文件名排序

【Python】模拟windows文件名排序

实现了一种模拟windows排序的python方法&#xff0c;其排序规则为&#xff1a; 不处理浮点数特殊字符&#xff08;如&#xff1a;&、$、# 等&#xff09;排在数字和字母之前&#xff1b;数字优先于字母排序&#xff1b;数字是连着的整数&#xff0c;应该按照整数进行排序&…
阅读更多...
Linux 三剑客之AWK

Linux 三剑客之AWK

1. 命令 awk [参数] [处理内容] [操作对象] 1.1. 参数 -F参数：这个参数用于指定输入字段的分隔符。例如，awk -F: {print $1} file.txt 会将文件file.txt中以冒号分隔的第一个字段打印出来。如果不指定-F参数，awk默认使用空格或制表符作为字段分隔符。 -v参数：该参数用于在…
阅读更多...
人机协同中的墨菲定律

人机协同中的墨菲定律

墨菲定律&#xff1a;如果有两种或两种以上的方式去做某件事情&#xff0c;而其中一种选择方式将导致灾难&#xff0c;则必定有人会做出这种选择。人机协同中的墨菲定律如何呢&#xff1f;下面我们将对此进行简单讨论。 人机协同中的墨菲定律可以理解为&#xff1a;如果在人与机…
阅读更多...
户外指南——时代产物

户外指南——时代产物

分类 一级分类&#xff1a; 衣&#xff1a;除了上述提到的&#xff0c;还包括衣物的材质、款式多样性、与身份地位的关联等。 食&#xff1a;还包括饮食的文化内涵、地域特色、对特殊饮食需求的满足等。 住&#xff1a;还包括居住空间的合理布局、智能家居的应用、与自然环境…
阅读更多...
不定期会议对团队开发的影响（项目管理篇）

不定期会议对团队开发的影响（项目管理篇）

不定期会议&#xff0c;即没有固定周期或事先规划的临时召集的会议&#xff0c;对于团队开发可能产生多种影响&#xff0c;既有积极的一面&#xff0c;也有潜在的挑战。以下是具体分析&#xff1a; 积极影响&#xff1a; 应对突发情况&#xff1a; 不定期会议能够迅速响应项…
阅读更多...
C# 异步编程模式详解

C# 异步编程模式详解

在软件开发中&#xff0c;异步编程是一种重要的编程范式&#xff0c;它允许代码在等待操作完成时继续执行。特别是在处理耗时的I/O操作&#xff08;如文件读写、网络请求和数据库操作&#xff09;时&#xff0c;异步编程可以显著提高应用程序的响应性和性能。C# 语言提供了丰富…
阅读更多...
微信小程序中前端 授权登录获取用户的openid

微信小程序中前端 授权登录获取用户的openid

序言&#xff1a; 集百家之所长&#xff0c;方成此篇&#xff0c;废话少说&#xff0c;上代码&#xff1b;找好你的小程序APPID,AppSecret(小程序密钥)&#xff0c;进行配置&#xff0c;然后复制粘贴代码&#xff0c;就可以了。 //微信小程序授权登录获取用户的openidwx.getUse…
阅读更多...
B2B企业如何做好谷歌Google广告推广营销布局？

B2B企业如何做好谷歌Google广告推广营销布局？

当今全球化的商业环境中&#xff0c;B2B企业要想在激烈的市场竞争中脱颖而出&#xff0c;拓展海外市场成为了必经之路。而谷歌Google广告&#xff0c;作为全球最大的在线广告平台&#xff0c;无疑是企业触达全球潜在客户的黄金钥匙。云衔科技通过专业服务助力企业轻松开户与高效…
阅读更多...
ASAN

ASAN

文章目录 ASAN 简介实例一&#xff0c;检测内存泄漏实例二&#xff0c;检测悬空指针访问实例三&#xff0c;检测堆溢出实例四&#xff0c;检测栈溢出ASAN 原理使用技巧KASAN ASAN 简介 ASAN 是 Address Sanitizer 的简称&#xff0c;是 GCC 自带的内存问题检查工具&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023