OpenCV.js 快速入门指南
1. 简介
OpenCV.js: OpenCV 的 JavaScript 版本
官方指南:OpenCV.js Tutorials
2. 下载
可通过如下链接下载到指定版本的预编译 opencv.js 文件
https://docs.opencv.org/{version}/opencv.js
比如下载 4.5.5 版本的 opencv.js 文件
https://docs.opencv.org/4.5.5/opencv.js
3. 安装使用
HTML script 标签引入
<!-- OpenCV.js 4.5.5 版本 --> <script src='https://docs.opencv.org/4.5.5/opencv.js'></script>
node.js 使用
// 加载 OpenCV.js function loadOpenCV(path) {return new Promise(resolve => {global.Module = {onRuntimeInitialized: resolve};global.cv = require(path);}); }// 加载并创建一个图像 async function run(path){await loadOpenCV(path)let img = new cv.Mat()img.delete() }// 设置文件路径 const path = './opencv.js'// 运行 run(path)
4. 数据类型
图像数据类型
Mat 是 OpenCV 基础的图像数据结构,其数据类型对照表如下:
Data Properties C++ Type JavaScript Typed Array Mat Type data uchar Uint8Array CV_8U data8S char Int8Array CV_8S data16U ushort Uint16Array CV_16U data16S short Int16Array CV_16S data32S int Int32Array CV_32S data32F float Float32Array CV_32F data64F double Float64Array CV_64F MatVector 即多个 Mat 组成的向量,使用 push_back(mat: cv.Mat)、 get(index: number) 和 set(index: number, mat: cv.Mat)方法添加、读取和设置 Mat 至 MatVector 中
Mat 和 MatVector 类型的变量请在不再需要使用的时候使用 delete() 方法将其删除,否则该变量将会持续占用内存
简单的创建和删除方式如下:
// 创建一个 Mat let mat = new cv.Mat()// 创建一个 MatVector let matVector = new cv.MatVector()// 添加一个 Mat matVector.push_back(mat)// 获取 index 为 0 的 Mat mat = matVector.get(0)// 设置 index 为 0 的 Mat matVector.set(0, mat)// 删除 Mat mat.delete()// 删除 MatVector matVector.delete()
其他数据类型及其对应的 JS 对象格式,创建变量时两种方式均可使用
// 坐标点 new cv.Point(x, y) = {x: number, y: number }// 像素点 new cv.Scalar(R, G, B, Alpha) = [R: number, G: number, B: number, Alpha: number ]// 图像尺寸 new cv.Size(width, height) = {width: number, height: number }// 圆形区域 new cv.Circle(center, radius) = {center: {x: number,y: number}, radius: number }// 矩形区域 new cv.Rect(x, y, width, height) = {x: number, y: number, width: number, height: number }// 旋转矩形区域 new cv.RotatedRect(center, size, angle) = {center: {x: number,y: number}, size: {width: number, height: number },angle: number }
5. API
OpenCV.js 的 API 与 OpenCV C++ 版本 API 非常相似
OpenCV.js 常用的 API 如下:
图像读取和显示
// 读取 cv.imread(dom) -> dst// 显示 cv.imshow(dst, dom)
dom(Dom/string): img 标签或其 id(读取) / canvas 标签或其 id(读取/显示)dst(cv.Mat): 图像(RGBA)
创建图像
// 创建一个 Mat 格式的图像 new cv.Mat() -> mat new cv.Mat(size, type) -> mat new cv.Mat(rows, cols, type) -> mat new cv.Mat(rows, cols, type, scalar) -> mat// 创建一个值全部为零的图像 cv.Mat.zeros(rows, cols, type) -> mat// 创建一个值全部为一的图像 cv.Mat.ones(rows, cols, type) -> mat// 创建一个对角线值为一的图像 cv.Mat.eye(rows, cols, type) -> mat// 使用 JS Array 生成图像 cv.matFromArray(rows, cols, type, array) -> mat// 使用 canvas ImageData 生成图像 cv.matFromImageData(imgData) - mat
size(cv.size): 图像尺寸rows(number): 图像高度cols(number): 图像宽度type(number): 图像类型(cv.CV_8UC3 ...)scalar(cv.Scalar): 图像初始值array(Array): JS 图像数组imgData(ImageData): canvas 图像数据mat(cv.Mat): 图像(type)
获取图像属性
// 图像高度 mat.rows -> rows// 图像宽度 mat.cols -> cols// 图像尺寸 mat.size() -> size// 图像通道数量 mat.channels() -> channels// 图像数据类型 mat.type() -> type
mat(cv.Mat): 图像rows(number): 图像高度cols(number): 图像宽度size(cv.Size): 图像尺寸channles(number): 图像通道数量type(number): 图像数据类型(cv.CV_8UC3 ...)
获取图像数据
mat.data -> data mat.data8S -> data8S mat.data16U -> data16U mat.data16S -> data16S mat.data32S -> data32S mat.data32F -> data32F mat.data64F -> data64F
mat(cv.Mat): 图像data(Uint8Array): 无符号 8 位整型数据data8S(Int8Array): 有符号 8 位整型数据data16U(Uint16Array): 无符号 16 位整型数据data16S(Int16Array): 有符号 16 位整型数据data32S(Int32Array): 有符号 32 位整型数据data32F(Float32Array): 32 位浮点数据data64F(Float64Array): 64 位浮点数据
裁切图像
mat.roi(rect) -> matROI
rect(cv.Rect): 图像裁切区域matROI(cv.Mat): 裁切图像
颜色空间转换
cv.cvtColor(src, dst, code)
src(cv.Mat): 输入图像dst(cv.Mat): 输出图像code(number): 转换类型(cv.COLOR_RGBA2RGB ...)
图像缩放
cv.resize(src, dst, dsize, fx, fy, interpolation)
src(cv.Mat): 输入图像dst(cv.Mat): 输出图像dsize(cv.Size): 目标尺寸fx(number): x 轴缩放因子fy(number): y 轴缩放因子interpolation(number): 插值类型(cv.INTER_LINEAR ...)
创建图像向量
new cv.MatVector() -> matVector
matVector(cv.MatVector): 图像向量
图像向量操作
// 添加 matVector.push_back(mat)// 获取 matVector.get(index) -> mat// 设置 matVector.set(index, mat)
matVector(cv.MatVector): 图像向量mat(cv.Mat): 图像index(number): 索引值
通道拆分与合并
// 拆分 cv.split(src, channels)// 合并 cv.merge(channels, dst)
src(cv.Mat): 输入图像dst(cv.Mat): 输出图像channels(cv.MatVector): 通道图像向量
删除对象
// 删除图像对象 mat.delete()// 删除图像向量对象 matVector.delete()
mat(cv.Mat): 图像matVector(cv.MatVector): 图像向量
创建视频流
new cv.VideoCapture(videoSource) -> cap
videoSource(Dom/string): video 标签或其 idcap(cv.VideoCapture): 视频流
读取视频帧
cap.read(mat)
cap(cv.VideoCapture): 视频流mat(cv.Mat): 图像
更多 API 和详细信息请参考官方文档:OpenCV Docs
更多示例代码请参考官方指南:OpenCV.js Tutorials
OpenCV.js 快速入门指南相关推荐
- node.js快速入门指南
Node.js迅速蹿红,衍生了一个强大的开源社区.支持企业,甚至还拥有属于自己的技术大会.我把这种成功归结于它的简介,高校,同时提高了编程生产力. Node.js 的前置知识很多,例如以下知识 Jav ...
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
- BERT模型超酷炫,上手又太难?请查收这份BERT快速入门指南!
点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 来自 | GitHub 作者 | Jay Alammar 转自 | 机器之心 如 ...
- Flux快速入门指南
翻译自 http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html 2015年2月26日 本文将概述如何使用Flux ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- micro-app-vue2 vue3 超详细快速入门指南 学习记录
micro-app-vue 快速入门指南 简介 micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它 ...
- ExtJS快速入门指南
1 ExtJS快速入门指南 一.ExtJS 框架简介.......................................................................... ...
- 54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础 能够与后端程序员更加紧密的配合 ...
- BERT模型超酷炫,上手又太难?请查收这份BERT快速入门指南
2019-12-31 10:50:59 选自GitHub 作者:Jay Alammar 参与:王子嘉.Geek AI 如果你是一名自然语言处理从业者,那你一定听说过最近大火的 BERT 模型.本文是一 ...
- RMAN快速入门指南
RMAN快速入门指南 1. What is RMAN? 什么是RMAN? 4 2. Terminology 专业词汇解释 4 2.1. Backup sets 备份集合 4 2. ...
最新文章
- 3060显卡,送一块!
- 业界丨AI公司魅力榜:谷歌最慷慨排第二,最抠门的你应该能想到
- python web为什么不火-Python这么火,为何有人说Python不好找工作?
- 华为鸿蒙系统是否上线,网友曝华为鸿蒙系统已经上线!官方回应:空欢喜一场...
- 根据wsdl生成对应的Java代码进行接口测试(一)
- python网易云_用python爬虫爬取网易云音乐
- (软件工程复习核心重点)第十二章软件项目管理习题
- Anigram单词(51Nod-1095)
- Action+Service +Dao三层的功能划分
- [开发笔记]-VS2012打开解决方案崩溃或点击项目崩溃
- 【vue】--利用vue-cli--搭建项目------1912--(另一个种)
- webservice 视频教程 Spring+xfire 整合
- poco mysql 登录_POCO数据库操作简介
- 古镇、温泉、阳澄湖品蟹二日游--这个周末,终于放松了一下。
- 分享苹果电脑和乔布斯的十项成功秘诀
- 人不行别怪路不平!万丈高楼平地起,要想辉煌靠自己。
- 不重装系统,如何将系统从SSD迁移到M2固态硬盘
- 家居行业渠道商销售系统线上线下一体化运作,促进产品更新迭代
- PVE 定时关机 定时开机
- 对QT的产品,以及QT的一些综合评论 good
热门文章
- JSP程序设计之(1)Tomcat安装及环境变量配置
- 中职计算机课例分析,中学信息技术课教学案例分析
- 《Excel VBA实战技巧精粹》终于登场了
- 计算机二级数据库题库百度云,计算机二级数据库试题及答案
- linux安装java步骤
- 嘻哈电音综合插件-Digikitz Linked Linked Vibes Workstation WiN-MAC
- python安装模块错误怎么办_Python pip安装模块提示错误解决方案
- 《STM32从零开始学习历程》——SPI读取FLASH ID
- 按下键时蜂鸣器发出声音c语言,学习日记——蜂鸣器开关实例
- win10-ubuntu-软件配置-开机root无密码-风扇转速调节