1 Introduction
-
OpenCV.js: JavaScript version of OpenCV
-
Official guide: OpenCV.js Tutorials
2. Download
-
You can download the specified version of the precompiled opencv.js file through the link below
https://docs.opencv.org/{version}/opencv.js
-
For example, download the opencv.js file of version 4.5.5
https://docs.opencv.org/4.5.5/opencv.js
3. Installation and use
-
HTML script tag import
<!-- OpenCV.js 4.5.5 版本 --> <script src='https://docs.opencv.org/4.5.5/opencv.js'></script>
-
node.js use
// 加载 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. Data type
-
image data type
-
Mat is the basic image data structure of OpenCV, and its data type comparison table is as follows:
Data Properties C++ Type JavaScript Typed Array Mat Type data fly Uint8Array CV_8U date8S 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 is a vector composed of multiple Mats, use push_back(mat: cv.Mat), get(index: number) and set(index: number, mat: cv.Mat) methods to add, read and set Mat to MatVector
-
For variables of Mat and MatVector types, please use the delete() method to delete them when they are no longer needed, otherwise the variables will continue to occupy memory
-
The simple way to create and delete is as follows:
// 创建一个 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()
-
-
Other data types and their corresponding JS object formats can be used in both ways when creating 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
-
The API of OpenCV.js is very similar to the OpenCV C++ version API
-
Commonly used APIs of OpenCV.js are as follows:
-
Image reading and display
// 读取 cv.imread(dom) -> dst // 显示 cv.imshow(dst, dom)
dom(Dom/string): img 标签或其 id(读取) / canvas 标签或其 id(读取/显示) dst(cv.Mat): 图像(RGBA)
-
create image
// 创建一个 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)
-
Get image properties
// 图像高度 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 ...)
-
get image data
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 位浮点数据
-
crop image
mat.roi(rect) -> matROI
rect(cv.Rect): 图像裁切区域 matROI(cv.Mat): 裁切图像
-
color space conversion
cv.cvtColor(src, dst, code)
src(cv.Mat): 输入图像 dst(cv.Mat): 输出图像 code(number): 转换类型(cv.COLOR_RGBA2RGB ...)
-
image scaling
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 ...)
-
Create image vector
new cv.MatVector() -> matVector
matVector(cv.MatVector): 图像向量
-
Image Vector Operations
// 添加 matVector.push_back(mat) // 获取 matVector.get(index) -> mat // 设置 matVector.set(index, mat)
matVector(cv.MatVector): 图像向量 mat(cv.Mat): 图像 index(number): 索引值
-
Channel splitting and merging
// 拆分 cv.split(src, channels) // 合并 cv.merge(channels, dst)
src(cv.Mat): 输入图像 dst(cv.Mat): 输出图像 channels(cv.MatVector): 通道图像向量
-
delete object
// 删除图像对象 mat.delete() // 删除图像向量对象 matVector.delete()
mat(cv.Mat): 图像 matVector(cv.MatVector): 图像向量
-
Create a video stream
new cv.VideoCapture(videoSource) -> cap
videoSource(Dom/string): video 标签或其 id cap(cv.VideoCapture): 视频流
-
read video frame
cap.read(mat)
cap(cv.VideoCapture): 视频流 mat(cv.Mat): 图像
-
-
For more API and detailed information, please refer to the official documentation: OpenCV Docs
-
For more sample codes, please refer to the official guide: OpenCV.js Tutorials