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

    原文作者:Jeff.Zhong
    原文地址: https://www.cnblogs.com/edwardloveyou/p/16259971.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞