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

OpenCV实战——OpenCV.js介绍

news 2026/3/29 11:09:37

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

地热模拟实战：当岩石遇上高温水流

Comsol地热开采-热流固耦合&#xff08;两个模型&#xff0c;均质和裂隙岩体&#xff09;附赠参考文献。地热开采就像给地球做"针灸"&#xff0c;要在不透水的花岗岩里造出人工热储层。最近用COMSOL折腾了两个典型模型&#xff1a;人畜无害的均质岩体和自带裂隙的破碎…...

编程新知 2026/3/29 10:38:59

权限控制避坑指南：为什么你的RBAC系统总出问题？从数据库设计到接口鉴权全解析

RBAC权限系统深度避坑指南&#xff1a;从数据库设计到接口鉴权的全链路实践 在数字化系统开发中&#xff0c;权限控制就像建筑物的承重墙——平时看不见&#xff0c;一旦出问题就是系统性崩溃。我曾见过一个日活百万的电商平台因为角色权限配置错误&#xff0c;导致客服人员误删…...

编程新知 2026/3/29 10:00:15

深度解析OpenCode插件架构：构建企业级AI助手扩展平台

深度解析OpenCode插件架构&#xff1a;构建企业级AI助手扩展平台 【免费下载链接】opencode 一个专为终端打造的开源AI编程助手&#xff0c;模型灵活可选&#xff0c;可远程驱动。 项目地址: https://gitcode.com/GitHub_Trending/openc/opencode 在当今AI驱动的开发环境…...

编程新知 2026/3/29 8:53:55

百度网盘提取码智能获取工具：3秒解锁任何分享资源的终极方案

百度网盘提取码智能获取工具&#xff1a;3秒解锁任何分享资源的终极方案 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾遇到过这样的场景&#xff1f;好不容易找到一个急需的学习资源&#xff0c;点击百度网盘链接后…...

编程新知 2026/3/29 8:09:40

RVC效果对比实测：原声vs克隆声，你能听出区别吗？

RVC效果对比实测&#xff1a;原声vs克隆声&#xff0c;你能听出区别吗&#xff1f; 1. 引言&#xff1a;AI语音克隆技术的新突破 想象一下&#xff0c;你最喜欢的歌手正在用你的声音唱歌&#xff0c;或者你的播客节目突然有了专业播音员的音色。这不再是科幻场景&#xff0c;…...

编程新知 2026/3/29 7:17:23

Wan2.1 VAE模型蒸馏与轻量化部署探索

Wan2.1 VAE模型蒸馏与轻量化部署探索 最近在折腾一些生成模型的实际落地&#xff0c;发现一个挺普遍的问题&#xff1a;模型效果是真好&#xff0c;但体积也是真的大&#xff0c;推理起来对硬件的要求不低。特别是想把模型搬到一些资源有限的边缘设备&#xff0c;或者希望降低…...

编程新知 2026/3/29 7:11:22

MiddleBury与SceneFlow数据集相机参数解析与深度图生成实战

1. MiddleBury与SceneFlow数据集简介 MiddleBury和SceneFlow是计算机视觉领域两个非常重要的立体视觉数据集。MiddleBury数据集由Middlebury College发布&#xff0c;包含了大量高质量的立体图像对&#xff0c;这些图像对由两台相机在同一时间、不同位置拍摄&#xff0c;涵盖了…...

编程新知 2026/3/29 6:51:05

开源大模型部署新范式：像素幻梦Streamlit前端+diffusers后端架构解析

开源大模型部署新范式&#xff1a;像素幻梦Streamlit前端diffusers后端架构解析 1. 项目概览 像素幻梦(Pixel Dream Workshop)是一款基于FLUX.1-dev扩散模型的像素艺术生成工具&#xff0c;它重新定义了AI艺术创作的用户体验。与传统AI绘图工具不同&#xff0c;它采用了独特的…...

编程新知 2026/3/29 6:22:25

ExifToolGUI完全指南：让照片元数据管理效率倍增的实用技巧

ExifToolGUI完全指南&#xff1a;让照片元数据管理效率倍增的实用技巧 【免费下载链接】ExifToolGui A GUI for ExifTool 项目地址: https://gitcode.com/gh_mirrors/ex/ExifToolGui 还在为照片位置管理烦恼&#xff1f;这款工具让地理标记效率提升300%。ExifToolGUI作为…...

编程新知 2026/3/29 6:14:23

Cursor试用限制如何解决？go-cursor-help工具三合一方案详解

Cursor试用限制如何解决&#xff1f;go-cursor-help工具三合一方案详解 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro…...

编程新知 2026/3/29 6:08:22