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

opencv学习之基础的更多相关文章

  1. opencv学习笔记(三)基本数据类型

    opencv学习笔记(三)基本数据类型 类:DataType 将C++数据类型转换为对应的opencv数据类型 OpenCV原始数据类型的特征模版.OpenCV的原始数据类型包括unsigned ch ...

  2. paper 93:OpenCV学习笔记大集锦

    整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...

  3. (转) OpenCV学习笔记大集锦 与 图像视觉博客资源2之MIT斯坦福CMU

          首页 视界智尚 算法技术 每日技术 来打我呀 注册     OpenCV学习笔记大集锦 整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的 ...

  4. OpenCV学习笔记(27)KAZE 算法原理与源码分析(一)非线性扩散滤波

    http://blog.csdn.net/chenyusiyuan/article/details/8710462 OpenCV学习笔记(27)KAZE 算法原理与源码分析(一)非线性扩散滤波 201 ...

  5. OpenCV学习资源库

    整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...

  6. OpenCV 学习笔记 02 使用opencv处理图像

    1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...

  7. OpenCV 学习笔记 01 安装OpenCV及相关依赖库

    本次学习是基于Window10进行的.语言为python3. 1 与opencv相关的库简介 1.1 numpy numpy 是 OpenCV 绑定 python 时所依赖的库,此意味着numpy在安 ...

  8. OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建

    # OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建 [-= 博客目录 =-] 1-学习目标 1.1-本章介绍 1.2-实践内容 1.3-相关说明 2-学习过程 2.1-hom ...

  9. opencv 学习笔记集锦

    整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...

随机推荐

  1. Zookeeper 的 java 客户端都有哪些?

    java 客户端:zk 自带的 zkclient 及 Apache 开源的 Curator.

  2. 在java web工程中jsp页面中使用kindeditor

    在这之前我们用Notepad++写过kindeditor 在Java web工程里也差不多 首先我们复制之前的thml代码粘贴到工程里 然后把样式也复制进去 然后就可以运行了

  3. spring aop 源码解读之我见

    spring aop 都是动态代理,分为jdk代理和cglib代理.默认的情况下,如果类有实现了接口,使用jdk代理.如果没有实现接口,则使用cglib代理.在下面的代码中,我会标明对应的这段代码. ...

  4. .NET 6学习笔记(3)——在Windows Service中托管ASP.NET Core并指定端口

    在上一篇<.NET 6学习笔记(2)--通过Worker Service创建Windows Service>中,我们讨论了.NET Core 3.1或更新版本如何创建Windows Ser ...

  5. 51单片机头文件reg51.h详解

    转自:http://www.51hei.com/mcu/2670.html 我们在用c语言编程时往往第一行就是头文件,51单片机为reg51.h或reg52.h,51单片机相对来说比较简单,头文件里面 ...

  6. ES6-11学习笔记--对象的扩展

    属性简洁表示法 属性名表达式 Objec.is() 扩展运算符 与 Object.assign() in 对象的遍历方式   属性简洁表示法: 如果属性key跟变量名一样,可简写 let name = ...

  7. css3属性之filter初探

    filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...

  8. Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...

  9. Python入门-pip模块管理工具

    安装 # 在线安装 pip install <包名> 安装后,该模块文件会在安装python环境目录:lib/packages目录下 # 安装本地安装包 pip install <目 ...

  10. c++对c的拓展_内联函数

    目的:保持处理宏的高效及安全性 解决的问题:1.c中预处理宏有些难以发现的问题 2.c++ 中预处理不能访问类成员,不能作用类的成员函数 作用:无函数调用时开销,又可像普通函数般进行参数.返回值类型安 ...