OpenCV.js 使用指南

最新推荐文章于 2025-05-16 11:46:56 发布

蒋荔卿Lorelei

最新推荐文章于 2025-05-16 11:46:56 发布

阅读量735

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00158/article/details/142777811

OpenCV.js 使用指南

项目地址:https://gitcode.com/gh_mirrors/op/opencvjs

项目介绍

OpenCV.js 是由 Intel 公司支持的一个JavaScript绑定库，它使得OpenCV强大的计算机视觉功能可以应用于Web平台。此项目基于OpenCV 3.1.0版本，通过Emscripten编译器将C++代码转换为可在浏览器中运行的JavaScript代码。这大大拓宽了计算机视觉技术的应用范围，允许开发者在无需安装本地库的情况下，在网页端实现图像处理和分析。

项目快速启动

要开始使用OpenCV.js，您需要遵循以下步骤：

获取源码

首先，克隆项目到本地：

git clone https://github.com/ucisysarch/opencvjs.git
cd opencvjs

然后，同样克隆OpenCV的指定版本（这里以3.1.0为例）：

git clone https://github.com/opencv/opencv.git
cd opencv
git checkout 3.1.0

安装Emscripten SDK

接下来，安装并激活Emscripten SDK：

/emsdk update
/emsdk install sdk-master-64bit --shallow
/emsdk activate sdk-master-64bit
source /emsdk_env.sh

编译和构建

应用补丁并重新构建环境：

patch -p1 < PATH/TO/patch_emscripten_master.diff
/emsdk install sdk-master-64bit --shallow
python make.py

完成后，您的opencv.js文件将生成在指定目录下，准备在Web项目中使用。

示例代码

在HTML文件中引入opencv.js，即可开始使用OpenCV的功能：

<script async src="path/to/opencv.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let img = document.getElementById('your-image-id');
        cv.imshow('canvasOutput', img);
        
        // 示例：高斯模糊
        let mat = new cv.Mat(img.width, img.height, cv.CV_8UC1, img.data);
        let mat2 = new cv.Mat();
        cv.GaussianBlur(mat, mat2, [3, 3], 0, 0, cv.BORDER_DEFAULT);
        cv.imshow('canvasOutput', mat2);
        mat.delete(); mat2.delete();
    });
</script>

确保替换 'path/to/opencv.js' 和 'your-image-id' 为您实际情况的路径和元素ID。