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

OpenCV实战——OpenCV.js介绍

news 2025/9/9 4:10:57

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实战——OpenCV.js介绍

OpenCV实战——OpenCV.js介绍

0. 前言

1. OpenCV.js 简介

2. 网页编写

3. 调用 OpenCV.js 库

4. 完整代码

相关链接

相关文章：

OpenCV实战——OpenCV.js介绍

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

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

232.用栈实现队列

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

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

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

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

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

IDEA创建Springboot多模块项目

React：JSX语法入门

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

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

Linux 调试 (objdump/strace/strings)

CAS 单点登录详解

tbh常用的绘图快捷键

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

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

macOS 安装brew

H5: 使用Web Audio API播放音乐

HTML 语义化

逻辑回归：给不确定性划界的分类大师

23-Oracle 23 ai 区块链表（Blockchain Table）

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

EtherNet/IP转DeviceNet协议网关详解

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

#Uniapp篇：chrome调试unapp适配

代码随想录刷题day30

jmeter聚合报告中参数详解