opencv学习之基础

技术分享 3年前 (2022-05-12) 0 999+

前段时间一直在钻研深度学习中的卷积神经网络，其中的预处理环节可以说非常关键，主要就是对图片和视频进行处理。而图像处理就涉及到图形学和底层技术细节，这是一个比较精深和专业的领域，假设我们要从头开始做起，那简直太麻烦和低效了。为解决这个问题，openCV就此应运而生，它屏蔽了很多底层技术细节，抽象出方便的API，而我们只需要灵活组合相关的 api 就能实现强大的功能。

内容大纲

构建openCV.js
opencv基础操作

构建openCV.js

openCV有各种语言的版本，比较常用的是C++ 和Python，也有JavaScript版本，因为基于js可以更快的验证和查看效果，同时也是因为本人不太擅长C++和Python，真的是有了 js 这把锤子把什么问题都看成钉子了😄。当然前提是因为目前V8引擎和wasm性能足够强悍，很多轻量级的需求完全可以放在前端来完成。

安装Emscripten

openCV是基于C/C++的，我们要用js版本的openCV，需要做转换，这就需要Emscripten 这个编译器了。

Emscripten 是一个基于LLVM的编译器，可以将C/C++语言编译为JavaScript。我们按着官网步骤一步一步下载安装就好：

# Get the emsdk repo git clone https://github.com/emscripten-core/emsdk.git # Enter that directory cd emsdk  # Fetch the latest version of the emsdk (not needed the first time you clone) git pull  # Download and install the latest SDK tools. ./emsdk install latest  # Make the "latest" SDK "active" for the current user. (writes .emscripten file) ./emsdk activate latest  # Activate PATH and other environment variables in the current terminal source ./emsdk_env.sh

下载openCV源码

安装完编译器，接着就是获取openCV的源码
```
git clone https://github.com/opencv/opencv.git 
```
打包openCV.js

工具链和源码都准备完毕，最后一步还需要安装Python，步骤确实有点多，Python的安装就不提了，下载包安装或者homebrew安装都可以，我们直接看打包的命令吧，默认打包为asm，我们选webAssembly版本的，最后从build_wasm拷贝出opencv.js。
```
cd opencv #进入opencv目录 python ./platforms/js/build_js.py build_js # default asm python ./platforms/js/build_js.py build_wasm --build_wasm # build wasm 
```

opencv基础操作

运行openCV.js，cv 默认是一个Promise，因此需要异步才能获取出openCV全局对象。

这里只做最简单的操作，读取图片，转换灰度图，显示图片

<canvas id="canvas" width="300" height="300"></canvas> <script src="./opencv.js"></script> <script>   const canvas = document.createElement('canvas');   let CV;   async function init() {     CV = await cv;     console.log('cv: ', CV);      const img = new Image();     img.src = './img.png';     img.onload = function () {       const src = CV.imread(img);//读取图片       const dst = new CV.Mat();       CV.cvtColor(src, dst, CV.COLOR_RGBA2GRAY);//转换为灰度图       CV.imshow(canvas, dst);//显示图片       src.delete();       dst.delete();     };   }      init(); </script>

矩阵操作，矩阵就是一个多维数组，而图片就是二维数组，这些基础操作我认为也是挺有用的。

const mat = new cv.Mat();// 默认矩阵 const mat = new cv.Mat(rows, cols, type);// 类型二维矩阵 const mat = new cv.Mat(rows, cols, type, new cv.Scalar());// 有初始值的类型二维矩阵  const mat = cv.Mat.zeros(rows, cols, type);//全部填充为0 const mat = cv.Mat.ones(rows, cols, type);//全部填充为1 const mat = cv.Mat.eye(rows, cols, type); //单位矩阵  const mat = cv.matFromArray(rows, cols, type, array);//由数组构建矩阵 const mat = cv.matFromImageData(imgData);//由图片构建矩阵 const dst = src.clone();//克隆 src.copyTo(dst, mask);//根据mask拷贝  cv.add(src1, src2, dst, mask, dtype);//矩阵相加 cv.subtract(src1, src2, dst, mask, dtype);//矩阵相减 cv.bitwise_and(roi, roi, imgBg, maskInv);//矩阵与运算 cv.bitwise_or(roi, roi, imgBg, maskInv);//矩阵或运算 cv.bitwise_xor(roi, roi, imgBg, maskInv);//矩阵异或运算 cv.bitwise_not(mask, maskInv);//矩阵非运算

数据结构类型，这个类型也可以了解一下

//点 const point = new cv.Point(x, y); const point = {x: x, y: y}; //向量 let scalar = new cv.Scalar(R, G, B, Alpha); let scalar = [R, G, B, Alpha]; //大小 const size = new cv.Size(width, height); const size = {width : width, height : height};  //圆形 let circle = new cv.Circle(center, radius); let circle = {center : center, radius : radius}; //矩形 let rect = new cv.Rect(x, y, width, height); let rect = {x : x, y : y, width : width, height : height};  //旋转矩形 let rotatedRect = new cv.RotatedRect(center, size, angle); let rotatedRect = {center : center, size : size, angle : angle};