opencv学习之基础

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

内容大纲

1. 构建openCV.js
2. opencv基础操作

构建openCV.js

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

1. 安装Emscripten

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

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

   # Get the emsdk repogit clone https://github.com/emscripten-core/emsdk.git# Enter that directorycd 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 terminalsource ./emsdk_env.sh

2. 下载openCV源码

   安装完编译器，接着就是获取openCV的源码

   git clone https://github.com/opencv/opencv.git

3. 打包openCV.js

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

   cd opencv #进入opencv目录python ./platforms/js/build_js.py build_js # default asmpython ./platforms/js/build_js.py build_wasm --build_wasm # build wasm

opencv基础操作

1. 运行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> 

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

   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);//全部填充为0const mat = cv.Mat.ones(rows, cols, type);//全部填充为1const 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);//矩阵非运算

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

   //点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做很多有趣的操作了，敬请期待。