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; 自然语言处理的一个重要范式包括对一般领域数据的大规模预训练和对特定任务或领域的适应处理。在自然语言处理中的许多应用依赖于将一个大规模的预训练语言模型适配到多个下游应用上。这种适配通常是通过…
阅读更多...
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…
阅读更多...
户外指南——时代产物

户外指南——时代产物

分类 一级分类&#xff1a; 衣&#xff1a;除了上述提到的&#xff0c;还包括衣物的材质、款式多样性、与身份地位的关联等。 食&#xff1a;还包括饮食的文化内涵、地域特色、对特殊饮食需求的满足等。 住&#xff1a;还包括居住空间的合理布局、智能家居的应用、与自然环境…
阅读更多...
B2B企业如何做好谷歌Google广告推广营销布局？

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

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

Java苍穹外卖01-开发环境搭建（Git、nginx）-Swagger-员工管理

一、开发环境搭建 1.项目架构 2.Git版本管理 在IDEA中可以一键搭建并commit&#xff0c;当Git远程仓库搭建后就可以push 3.前后端联调 Builder注解&#xff1a; 加了注解后就可以通过这样的方式创建对象 接收传入的是dto对象&#xff0c;传出去的对象为vo对象 4.nginx反向…
阅读更多...
4.18.2 EfficientViT:具有级联组注意力的内存高效Vision Transformer

4.18.2 EfficientViT:具有级联组注意力的内存高效Vision Transformer

现有Transformer模型的速度通常受到内存低效操作的限制&#xff0c;尤其是MHSA&#xff08;多头自注意力&#xff09;中的张量整形和逐元素函数。 设计了一种具有三明治布局的新构建块&#xff0c;即在高效FFN&#xff08;前馈&#xff09;层之间使用单个内存绑定的MHSA&#x…
阅读更多...
【STM32HAL库】外部中断

【STM32HAL库】外部中断

目录 一、中断简介 二、NVIC 1.寄存器 2.工作原理 3.优先级 4.使用NVIC 三、EXTI 1.简介 2.AFIO&#xff1a;复用功能IO&#xff0c;主要用于重映射和外部中断映射配置​编辑 3. 中断使用 4.HAL库配置使用 一、中断简介 中断的意义&#xff1a;高效处理紧急程序&#xff0c;不会…
阅读更多...
SPRD Android 14 通过属性控制系统设置显示双栏或者单栏

SPRD Android 14 通过属性控制系统设置显示双栏或者单栏

SPRD Android 14 通过属性控制系统设置显示双栏或者单栏 第一步 确认有添加静态库第二步 验证第三步 修改源码在合适的地方配置 ro.product.is_support_SettingsSplitEnabled 即可。第一步 确认有添加静态库 --- a/packages/apps/Settings/Android.bp +++ b/packages/apps/Set…
阅读更多...
php反序列化逃逸

php反序列化逃逸

php反序列化逃逸 逃逸是php中反序列化时的恶意利用&#xff0c;以ctf为例演示 第一段演示 逃逸为ctf反序列化的内容&#xff0c;主要是对序列化对象进行过滤&#xff0c;其中替换串长度不一致&#xff0c;造成字符逃逸。攻击者可以构造恶意的payload&#xff0c;改变对象中的…
阅读更多...
MATLAB循环语句

MATLAB循环语句

MATLAB 循环语句 在某些情况下&#xff0c;您需要多次执行一个代码块。通常&#xff0c;语句是按顺序执行的。首先执行函数中的第一条语句&#xff0c;然后执行第二条&#xff0c;依此类推。 编程语言提供了各种控制结构&#xff0c;允许更复杂的执行路径。 循环语句允许我们…
阅读更多...
猫头虎分享已解决Bug || **Error: ‘Promise‘ is undefined**

猫头虎分享已解决Bug || **Error: ‘Promise‘ is undefined**

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
3.8设计模式——State 状态模式（行为型）

3.8设计模式——State 状态模式（行为型）

意图 允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。 结构 Context&#xff08;上下文&#xff09;定义客户感兴趣的接口&#xff1b;维护一个ConcreteState子类的实例&#xff0c;这个实例定义当前状态。State&#xff08;状态&#xff09;定义…
阅读更多...
4 -25

4 -25

1 100个英语单词两篇六级阅读 2 cf补题&#xff1b; 3 仿b站项目看源码 debug分析业务。 上了一天课&#xff0c;晚上去健身。 物理备课&#xff0c;周六去上课腻。 五一回来毛泽东思想期末考试&#xff0c;概率论期中考试。
阅读更多...
冯诺依曼体系结构再谈操作系统

冯诺依曼体系结构再谈操作系统

前言 前面对基本的指令、权限以及环境开发的基本工具进行了介绍&#xff0c;本期开始我们将进入系统的的学习&#xff0c;例如我们常听的进程等&#xff0c;在进入进程的学习前我们先要铺垫一下&#xff0c;所以本期我们先来介绍一下冯诺依曼体系结构和再谈操作系统&#xff0…
阅读更多...
30 番外5 AHK语法应用实战

30 番外5 AHK语法应用实战

番外5 AHK语法应用实战 ahk是一种极其轻量,极其易上手,极其方便好用的脚本语言,对于没有编程基础的人来说,可以轻松掌握. 作为一个强大轻量的工具,ahk主要提供了热键宏操作. 什么是热键宏?简单的理解,就是自定义快捷键. AHK使用场景举例 ahk到底有什么用处呢? 1.把一个按键映…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

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