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

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 asm
   python ./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);//全部填充为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);//矩阵非运算
   

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