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

OpenCV实战——OpenCV.js介绍

news 2025/12/13 6:06:47

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/12/12 13:21:51

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/12/8 7:22:57

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/12/12 7:06:04

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/12/3 19:04:20

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/12/9 22:50:12