1. Introducción
-
OpenCV.js: versión JavaScript de OpenCV
-
Guía oficial: Tutoriales de OpenCV.js
2. Descargar
-
Puede descargar la versión especificada del archivo opencv.js precompilado a través del siguiente enlace
https://docs.opencv.org/{version}/opencv.js
-
Por ejemplo, descargue el archivo opencv.js de la versión 4.5.5
https://docs.opencv.org/4.5.5/opencv.js
3. Instalación y uso
-
Importación de etiquetas de script HTML
<!-- OpenCV.js 4.5.5 版本 --> <script src='https://docs.opencv.org/4.5.5/opencv.js'></script>
-
uso de 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. Tipo de datos
-
tipo de datos de imagen
-
Mat es la estructura de datos de imagen básica de OpenCV, y su tabla de comparación de tipos de datos es la siguiente:
Propiedades de datos Tipo C++ Matriz con tipo de JavaScript Tipo de tapete datos volar Uint8Array CV_8U fecha8S carbonizarse Int8Array CV_8S datos16U corto Uint16Array CV_16U datos16S corto Int16Array CV_16S datos32S En t matriz int32 CV_32S datos32F flotar Matriz flotante32 CV_32F datos64F doble Matriz flotante64 CV_64F -
MatVector es un vector compuesto por múltiples Mats, use los métodos push_back(mat: cv.Mat), get(index: number) y set(index: number, mat: cv.Mat) para agregar, leer y configurar Mat a MatVector
-
Para las variables de tipo Mat y MatVector, utilice el método delete() para eliminarlas cuando ya no sean necesarias; de lo contrario, las variables seguirán ocupando memoria.
-
La forma sencilla de crear y eliminar es la siguiente:
// 创建一个 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()
-
-
Otros tipos de datos y sus formatos de objeto JS correspondientes se pueden usar de ambas maneras al crear variables
// 坐标点 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
-
La API de OpenCV.js es muy similar a la versión API de OpenCV C++
-
Las API de uso común de OpenCV.js son las siguientes:
-
Lectura y visualización de imágenes.
// 读取 cv.imread(dom) -> dst // 显示 cv.imshow(dst, dom)
dom(Dom/string): img 标签或其 id(读取) / canvas 标签或其 id(读取/显示) dst(cv.Mat): 图像(RGBA)
-
crear imagen
// 创建一个 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)
-
Obtener propiedades de imagen
// 图像高度 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 ...)
-
obtener datos de imagen
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 位浮点数据
-
delimitar imagen
mat.roi(rect) -> matROI
rect(cv.Rect): 图像裁切区域 matROI(cv.Mat): 裁切图像
-
conversión de espacio de color
cv.cvtColor(src, dst, code)
src(cv.Mat): 输入图像 dst(cv.Mat): 输出图像 code(number): 转换类型(cv.COLOR_RGBA2RGB ...)
-
escalado de imagen
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 ...)
-
Crear vector de imagen
new cv.MatVector() -> matVector
matVector(cv.MatVector): 图像向量
-
Operaciones de vectores de imagen
// 添加 matVector.push_back(mat) // 获取 matVector.get(index) -> mat // 设置 matVector.set(index, mat)
matVector(cv.MatVector): 图像向量 mat(cv.Mat): 图像 index(number): 索引值
-
División y fusión de canales
// 拆分 cv.split(src, channels) // 合并 cv.merge(channels, dst)
src(cv.Mat): 输入图像 dst(cv.Mat): 输出图像 channels(cv.MatVector): 通道图像向量
-
eliminar objeto
// 删除图像对象 mat.delete() // 删除图像向量对象 matVector.delete()
mat(cv.Mat): 图像 matVector(cv.MatVector): 图像向量
-
Crear una transmisión de video
new cv.VideoCapture(videoSource) -> cap
videoSource(Dom/string): video 标签或其 id cap(cv.VideoCapture): 视频流
-
leer cuadro de video
cap.read(mat)
cap(cv.VideoCapture): 视频流 mat(cv.Mat): 图像
-
-
Para obtener más API e información detallada, consulte la documentación oficial: OpenCV Docs
-
Para obtener más códigos de muestra, consulte la guía oficial: Tutoriales de OpenCV.js