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