opencv学习之基础
前段时间一直在钻研深度学习中的卷积神经网络,其中的预处理环节可以说非常关键,主要就是对图片和视频进行处理。而图像处理就涉及到图形学和底层技术细节,这是一个比较精深和专业的领域,假设我们要从头开始做起,那简直太麻烦和低效了。为解决这个问题,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做很多有趣的操作了,敬请期待。
opencv学习之基础的更多相关文章
- opencv学习笔记(三)基本数据类型
opencv学习笔记(三)基本数据类型 类:DataType 将C++数据类型转换为对应的opencv数据类型 OpenCV原始数据类型的特征模版.OpenCV的原始数据类型包括unsigned ch ...
- paper 93:OpenCV学习笔记大集锦
整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...
- (转) OpenCV学习笔记大集锦 与 图像视觉博客资源2之MIT斯坦福CMU
首页 视界智尚 算法技术 每日技术 来打我呀 注册 OpenCV学习笔记大集锦 整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的 ...
- OpenCV学习笔记(27)KAZE 算法原理与源码分析(一)非线性扩散滤波
http://blog.csdn.net/chenyusiyuan/article/details/8710462 OpenCV学习笔记(27)KAZE 算法原理与源码分析(一)非线性扩散滤波 201 ...
- OpenCV学习资源库
整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- OpenCV 学习笔记 01 安装OpenCV及相关依赖库
本次学习是基于Window10进行的.语言为python3. 1 与opencv相关的库简介 1.1 numpy numpy 是 OpenCV 绑定 python 时所依赖的库,此意味着numpy在安 ...
- OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建
# OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建 [-= 博客目录 =-] 1-学习目标 1.1-本章介绍 1.2-实践内容 1.3-相关说明 2-学习过程 2.1-hom ...
- opencv 学习笔记集锦
整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...
随机推荐
- Zookeeper 的 java 客户端都有哪些?
java 客户端:zk 自带的 zkclient 及 Apache 开源的 Curator.
- 在java web工程中jsp页面中使用kindeditor
在这之前我们用Notepad++写过kindeditor 在Java web工程里也差不多 首先我们复制之前的thml代码粘贴到工程里 然后把样式也复制进去 然后就可以运行了
- spring aop 源码解读之我见
spring aop 都是动态代理,分为jdk代理和cglib代理.默认的情况下,如果类有实现了接口,使用jdk代理.如果没有实现接口,则使用cglib代理.在下面的代码中,我会标明对应的这段代码. ...
- .NET 6学习笔记(3)——在Windows Service中托管ASP.NET Core并指定端口
在上一篇<.NET 6学习笔记(2)--通过Worker Service创建Windows Service>中,我们讨论了.NET Core 3.1或更新版本如何创建Windows Ser ...
- 51单片机头文件reg51.h详解
转自:http://www.51hei.com/mcu/2670.html 我们在用c语言编程时往往第一行就是头文件,51单片机为reg51.h或reg52.h,51单片机相对来说比较简单,头文件里面 ...
- ES6-11学习笔记--对象的扩展
属性简洁表示法 属性名表达式 Objec.is() 扩展运算符 与 Object.assign() in 对象的遍历方式 属性简洁表示法: 如果属性key跟变量名一样,可简写 let name = ...
- css3属性之filter初探
filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...
- Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...
- Python入门-pip模块管理工具
安装 # 在线安装 pip install <包名> 安装后,该模块文件会在安装python环境目录:lib/packages目录下 # 安装本地安装包 pip install <目 ...
- c++对c的拓展_内联函数
目的:保持处理宏的高效及安全性 解决的问题:1.c中预处理宏有些难以发现的问题 2.c++ 中预处理不能访问类成员,不能作用类的成员函数 作用:无函数调用时开销,又可像普通函数般进行参数.返回值类型安 ...