opencv学习之基础

前段时间一直在钻研深度学习中的卷积神经网络，其中的预处理环节可以说非常关键，主要就是对图片和视频进行处理。而图像处理就涉及到图形学和底层技术细节，这是一个比较精深和专业的领域，假设我们要从头开始做起，那简直太麻烦和低效了。为解决这个问题，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};

总结

打包构建出openCV.js，同时也学习了openCV相关的基础。后面我们就可以基于openCV做很多有趣的操作了，敬请期待。