当前位置： 首页 > news >正文

OpenCV实战——OpenCV.js介绍

news 2026/2/10 5:26:38

OpenCV实战——OpenCV.js介绍

    • 0. 前言
    • 1. OpenCV.js 简介
    • 2. 网页编写
    • 3. 调用 OpenCV.js 库
    • 4. 完整代码
    • 相关链接

0. 前言

本节介绍如何使用 JavaScript 通过 OpenCV 开发计算机视觉算法。在 OpenCV.js 之前，如果想要在 Web 上执行一些计算机视觉任务，必须在服务器使用 C++ 进行开发，但在 OpenCV.js 中，使用 Web 浏览器的客户端拥有了直接使用计算机视觉应用的可能性。在本节中，我们将编写一个非常简单的应用，将图像加载到 HTML img 标签中，转换图像色彩空间并在 canvas 元素中绘制。

1. OpenCV.js 简介

OpenCV.js 是 OpenCV 函数的端口，将 C++ 代码编译为 JavaScript。OpenCV 使用 Emscripten 将 C++ 函数编译为 Asm.js 或 WebAssembly 目标

  • Asm.js 是经过高度优化的，其接近本机代码，但速度比相同的本机可执行应用程序大约慢 2 倍(具体取决于浏览器和计算机性能)
  • WebAssembly 是一种新 Web 标准，它定义了一种用于在网页中执行代码的二进制格式。旨在补充 JavaScript，加速代码运行速度以接近本机代码执行速度。该技术是提高计算机视觉性能和将 OpenCV 移植到 JavaScript 的最佳选择

WebAssembly 针对速度进行了高度优化，并实现了速度接近本机的代码。接下来，我们构建一个简单的网页结构，通过一个简单的按钮，可以将图像加载到用作输入图像的 img 元素中。读取 img 元素内容，可以将其加载到 cv::Mat 中并应用 OpenCV 可以提供的所有计算机视觉函数。在示例代码中，我们将彩色图像转换为灰度图像。OpenCV.js 修改了 imshow 函数，允许我们在 canvas 元素而不是新窗口中显示 cv::Mat，使我们能够与网页进行交互。

2. 网页编写

在使用 OpenCV.js 之前，我们需要编写一个网页作为用户界面。使用 img、canvas 和 button 元素创建一个 HTML 页面：

<!doctype html>
<html lang="en">
<head><!-- Required meta tags --><meta charset="utf-8"><style>#container {min-height:300px;}#canvasOutput, #imageSrc{background:#ccc;min-width:300px;min-height:300px;display:block;float:left;	margin-left:20px;}</style><title>OpenCV Computer vision on Web. Packt Publishing.</title>
</head>
<body><div id="status" class="alert alert-primary" role="alert">Loading OpenCV...</div><div id="container">        <img id="imageSrc" alt="No Image" class="small" src="img/gray.png"><canvas id="canvasOutput" class="small" height="300px"></canvas></div>        <input type="file" id="fileInput" name="file" accept="image/*">

3. 调用 OpenCV.js 库

(1) 在网页中加载 OpenCV JavaScript 库：

    <!-- OPENCV --><script async="" src="data/opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script>

(2) 在 script 包装器中创建应用程序，我们需要获取输入按钮和图像元素的变量：

    <script type="text/javascript">let imgElement = document.getElementById('imageSrc');let inputElement = document.getElementById('fileInput');

(3) 点击按钮时，将选中的图片加载到 img 元素中：

        inputElement.addEventListener('change', (e) => {imgElement.src = URL.createObjectURL(e.target.files[0]);}, false);

(4) 当图像加载到 img 元素中时，使用 OpenCV 函数应用所需操作。在本节中，我们将 RGB 图像转换为灰度图像，使用 imshow 函数通过将结果传递给函数 canvas 的 ID 在 canvas 元素中显示结果：

        imgElement.onload = function() {let mat = cv.imread(imgElement);cv.cvtColor(mat, mat, cv.COLOR_BGR2GRAY);cv.imshow('canvasOutput', mat);estimateFmat.delete();};

应用 OpenCV.js 结果

4. 完整代码

完整代码 opencvjs_example.html 如下所示：

<!doctype html>
<html lang="en">
<head><!-- Required meta tags --><meta charset="utf-8"><style>#container {min-height:300px;}#canvasOutput, #imageSrc{background:#ccc;min-width:300px;min-height:300px;display:block;float:left;	margin-left:20px;}</style><title>OpenCV Computer vision on Web. Packt Publishing.</title>
</head>
<body><div id="status" class="alert alert-primary" role="alert">Loading OpenCV...</div><div id="container">        <img id="imageSrc" alt="No Image" class="small" src="img/gray.png"><canvas id="canvasOutput" class="small" height="300px"></canvas></div>        <input type="file" id="fileInput" name="file" accept="image/*"><!-- Optional JavaScript --><script src="data/common.js"></script><!-- OPENCV --><script async="" src="data/opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script><script type="text/javascript">let imgElement = document.getElementById('imageSrc');let inputElement = document.getElementById('fileInput');inputElement.addEventListener('change', (e) => {imgElement.src = URL.createObjectURL(e.target.files[0]);}, false);imgElement.onload = function() {let mat = cv.imread(imgElement);cv.cvtColor(mat, mat, cv.COLOR_BGR2GRAY);cv.imshow('canvasOutput', mat);mat.delete();};function onOpenCvReady() { // eslint-disable-line no-unused-varsdocument.getElementById('status').innerHTML = '<b>OpenCV.js is ready</b>.' +'You can upload an image.<br>' +'The <b>imageSrc</b> is a &lt;img&gt; element used as cv.Mat input. ' +'The <b>canvasOutput</b> is a &lt;canvas&gt; element used as cv.Mat output.';}function onOpenCvError() { // eslint-disable-line no-unused-varslet element = document.getElementById('status');element.setAttribute('class', 'err');element.innerHTML = 'Failed to load opencv.js';}</script>
</body>
</html>

相关链接

OpenCV实战（1）——OpenCV与图像处理基础
OpenCV实战（2）——OpenCV核心数据结构
OpenCV实战（3）——图像感兴趣区域
OpenCV实战（4）——像素操作
OpenCV实战（5）——图像运算详解
OpenCV实战（6）——OpenCV策略设计模式
OpenCV实战（7）——OpenCV色彩空间转换
OpenCV实战（8）——直方图详解
OpenCV实战（9）——基于反向投影直方图检测图像内容
OpenCV实战（10）——积分图像详解
OpenCV实战（11）——形态学变换详解
OpenCV实战（12）——图像滤波详解
OpenCV实战（13）——高通滤波器及其应用
OpenCV实战（14）——图像线条提取
OpenCV实战（15）——轮廓检测详解
OpenCV实战（16）——角点检测详解
OpenCV实战（17）——FAST特征点检测
OpenCV实战（18）——特征匹配
OpenCV实战（19）——特征描述符
OpenCV实战（20）——图像投影关系
OpenCV实战（21）——基于随机样本一致匹配图像
OpenCV实战（22）——单应性及其应用
OpenCV实战（23）——相机标定
OpenCV实战（24）——相机姿态估计
OpenCV实战（25）——3D场景重建
OpenCV实战（26）——视频序列处理
OpenCV实战（27）——追踪视频中的特征点
OpenCV实战（28）——光流估计
OpenCV实战（29）——视频对象追踪
OpenCV实战（30）——OpenCV与机器学习的碰撞
OpenCV实战（31）——基于级联Haar特征的目标检测
OpenCV实战（32）——使用SVM和定向梯度直方图执行目标检测
OpenCV实战（33）——OpenCV与深度学习的碰撞

相关文章：

OpenCV实战——OpenCV.js介绍

OpenCV实战——OpenCV.js介绍 0. 前言1. OpenCV.js 简介2. 网页编写3. 调用 OpenCV.js 库4. 完整代码相关链接 0. 前言 本节介绍如何使用 JavaScript 通过 OpenCV 开发计算机视觉算法。在 OpenCV.js 之前&#xff0c;如果想要在 Web 上执行一些计算机视觉任务&#xff0c;必须…...

编程日记 2023/11/4 5:24:51

qt5工程打包成可执行exe程序

一、编译生成.exe 1.1、在release模式下编译生成.exe 1.2、建一个空白文件夹package&#xff0c;再将在release模式下生成的.exe文件复制到新建的文件夹中package。 1.3、打开QT5的命令行 1.4、用命令行进入新建文件夹package&#xff0c;使用windeployqt对生成的exe文件进行动…...

编程日记 2023/11/4 5:23:49

Qt之基于QCustomPlot绘制直方图（Histogram），叠加正态分布曲线

一.效果 二.原理 1.正态分布 高斯分布(Gaussian distribution)，又名正态分布(Normal distribution)，也称"常态分布"，也就是说，在正常的状态下，一般的事物，都会符合这样的分布规律。 比如人的身高为一个随机变量，特别高的人比较少，特别矮的也很少，大部分都…...

编程日记 2023/11/4 5:22:49

232.用栈实现队列

原题链接&#xff1a;232.用栈实现队列 思路 主要是要注意栈和队列的数据结构的区别&#xff0c;一个是后进先出&#xff0c; 一个是先进先出 如果要用栈模拟队列的先进先出&#xff0c;那就得使用另一个辅助空间来存储栈的栈顶元素&#xff0c;然后把栈最底部的元素弹出&…...

编程日记 2023/11/4 5:21:48

C51--项目--感应开关盖垃圾桶

1、项目概述 功能描述&#xff1a; 检测靠近时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 发生震动时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 按下按键时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 硬件说明…...

编程日记 2023/11/4 5:20:47

基于单片机设计的太阳能跟踪器

一、前言 随着对可再生能源的需求不断增长&#xff0c;太阳能作为一种清洁、可持续的能源形式&#xff0c;受到越来越多的关注和应用。太阳能光板通常固定在一个固定的角度上&#xff0c;这限制了它们对太阳光的接收效率。为了充分利用太阳能资源&#xff0c;提高太阳能光板的…...

编程日记 2023/11/4 5:19:44

【踩坑及思考】浏览器存储 cookie 最大值超过 4kb，或 http 头 cookie 超过限制值

背景 本地生产环境&#xff1a;超过最大值 cookie token 不存储&#xff1b;客户生产环境&#xff1a;打开系统空白&#xff0c;且控制台报 http 400 错误&#xff1b; 出现了两种现象 现象一&#xff1a;浏览器对大于 4kb 的 cookie 值不存储 导致用户名密码登录&#xff…...

编程日记 2023/11/4 5:18:42

竞赛选题 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的行人重识别算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c…...

编程日记 2023/11/4 5:17:41

SpringCloud Gateway实现请求解密和响应加密

文章目录 前言正文一、项目简介二、核心代码2.1 自定义过滤器2.2 网关配置2.3 自定义配置类2.4 加密组件接口2.5 加密组件实现&#xff0c;AES算法2.6 启动类&#xff0c;校验支持的算法配置 三、请求报文示例四、测试结果4.1 网关项目启动时4.2 发生请求时 前言 本文环境使用比…...

编程日记 2023/11/4 5:16:40

IDEA创建Springboot多模块项目

一、创建父模块 File --> New --> Project &#xff0c;选择 “ Spring Initalizr ” &#xff0c;点击 Next Next Next --> Finish 二、创建子模块 右键根目录&#xff0c;New --> Module 选择 “ Spring Initializr ”&#xff0c;点击Next 此处注意T…...

编程日记 2023/11/4 5:15:38

React：JSX语法入门

JSX语法入门及代码 JSX是一种JavaScript的语法扩展&#xff0c;用于在React中描述用户界面的结构。它允许开发者使用类似HTML的语法来创建React元素&#xff0c;使得代码更具可读性和可维护性。JSX将HTML标签和JavaScript代码结合在一起&#xff0c;可以在其中使用JavaScript表…...

编程日记 2023/11/4 5:14:37

AI大模型架构师专家，你会问什么来测试我的水平，如何解答上述问题，学习路径是什么

0. 沈剑老师的大模型产品应用经验&#xff1a; 提示词三步骤&#xff1a; 假如我是xxx专家&#xff0c;你会问什么来测试我的水平&#xff1b;假如你是xxx专家&#xff0c;你会如何解答上述问题&#xff1b;假如你是xxx专家&#xff0c;上述问题的学习路径是什么&#xff1b;…...

编程日记 2023/11/4 5:11:31

Dev-C调试的基本方法2-1

在Dev-C中调试程序&#xff0c;首先需要在程序中设置断点&#xff0c;之后以调试的方式运行程序。 1 设置断点 当以调试的方式运行程序时&#xff0c;程序会在断点处停下来。点击要设置断点代码行号左侧部分&#xff0c;此时会有如图1所示的红点和绿色对勾&#xff0c;表示断…...

编程日记 2023/11/4 5:10:31

Linux 调试 (objdump/strace/strings)

目录 1. Linux 调试 (objdump/strace/strings)1.1. 查看系统 glibc 版本号1.2. 查看 so/bin 中的依赖1.3. 调试 bin 报错原因1.4. 查看 so/bin 中字符串 1. Linux 调试 (objdump/strace/strings) 1.1. 查看系统 glibc 版本号 1. 第一种 # ldd --version ldd (Ubuntu GLIBC 2.…...

编程日记 2023/11/4 5:09:30

CAS 单点登录详解

什么是CAS&#xff1f; - 简要介绍CAS&#xff08;Central Authentication Service&#xff09;的概念和作用。 - 强调CAS的主要目标是提供单点登录和单点登出功能。 CAS的工作原理 - 深入探讨CAS的工作原理&#xff0c;包括认证、票据、验证等核心概念。 - 详细解释CAS服务器和…...

编程日记 2023/11/4 5:08:28

tbh常用的绘图快捷键

1、Altb -> 笔刷 2、Alt/ -> 画笔 3、按住Shift 绘出的线条是直线 4、按住shiftalt 绘出来的线条是水平线或垂直线 5、alte ->橡皮擦 6、alts ->选择工具 7、altq -> 轮廓编辑器 以下操作都是在选中轮廓编辑器下操作的&#xff1a; 按住alt…...

编程日记 2023/11/4 5:07:27

Android-Framework 清除应用用户数据，不清除权限

一、环境 高通865 Android 10 二、具体详情 现象&#xff1a;默认赋予第三方应用的权限&#xff0c;在应用信息中清理用户数据的时候&#xff0c;权限也会被清理掉; 希望&#xff1a;只清理数据&#xff0c;保留权限 相关源码修改如下&#xff1a; frameworks/base/servi…...

编程日记 2023/11/4 5:06:26

CS认证办理流程,CS认证好处

CS资质全名叫“信息系统建设和服务能力评估体系” 所谓的CS认证&#xff0c;是指信息系统建设和服务能力评级。认证一共划分为五个等级&#xff0c;等级从低到高分别用CS1级&#xff08;初始级&#xff09;、CS2级&#xff08;基本级&#xff09;、CS3级&#xff08;良好级&…...

编程日记 2023/11/4 5:05:25

macOS 安装brew

参考链接&#xff1a; https://mirrors4.tuna.tsinghua.edu.cn/help/homebrew/ https://www.yii666.com/blog/429332.html 安装中科大源的&#xff1a; https://zhuanlan.zhihu.com/p/470873649...

编程日记 2023/11/4 5:03:22

H5: 使用Web Audio API播放音乐

简介 记录关于自己使用 Web Audio API 的 AudioContext 播放音乐的知识点。 需求分析 1.列表展示音乐&#xff1b; 2.上/下一首、播放/暂停/续播&#xff1b; 3.播放模式切换&#xff1a;循环播放、单曲循环、随机播放&#xff1b; 4.播放状态显示&#xff1a;当前播放的音乐…...

编程日记 2023/11/4 5:02:21

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18