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) - matsize(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() -> typemat(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 -> data64Fmat(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) -> matROIrect(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() -> matVectormatVector(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) -> capvideoSource(Dom/string): video 标签或其 id cap(cv.VideoCapture): 视频流 -
读取视频帧
cap.read(mat)cap(cv.VideoCapture): 视频流 mat(cv.Mat): 图像
-
-
更多 API 和详细信息请参考官方文档：OpenCV Docs文章来源：https://www.toymoban.com/news/detail-563408.html
-
更多示例代码请参考官方指南：OpenCV.js Tutorials文章来源地址https://www.toymoban.com/news/detail-563408.html
到了这里，关于OpenCV.js 快速入门指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
