OpenCV.js 基础操作

获取图像数据

图像数据有图像的属性、类型、行数、列数、大小、深度、通道

			let img=cv.imread('canvasInput')
            console.log("img size :",img.size())
            console.log('img type :',img.type())
            console.log('img cols :',img.cols)
            console.log('img rows :',img.rows)
            console.log('img depth:',img.depth())
            console.log('img channels:',img.channels())

			//img size : {width: 300, height: 150}
			//img type : 24
			//img cols : 300
			//img rows : 150
			//img depth: 0
			//img channels: 4

如何构建Mat

使用 cv.Mat方法构建图像矩阵

//使用4个构造函数构造矩阵
//创建默认矩阵
let mat=new cv.Mat()
//创建有行、列的矩阵
let mat=new cv.Mat(rows,cols)
//创建有行、列、类型的矩阵
let mat=new cv.Mat(rows,cols,type)
//创建有行、列、类型、初始化值得矩阵
let mat=new cv.Mat(rows,cols,type,cv.Scalar())

//创建全零矩阵
let mat=cv.Mat.zeros(rows,cols,type)
//创建全1矩阵
let mat=cv.Mat.ones(rows,cols,type)
//创建单位矩阵
let mat=cv.Mat.eye(rows,cols,type)


// 使用js数组创建
let mat=cv.matFromArray(2,2,cv.CV_8UC1,[1,2,3,4])
// 使用canvas imageData创建
let canvas=document.getElementById('canvasInput')
let ctx=canvas.getContext('2d')
let imageData=ctx.getImageData(0,0,canvas.width,canvas.height)
let mat=cv.matFormImageData(imageData)

矩阵的复制：

let dst=src.clone()
//仅复制掩码中指定部分
src.copyTo(dst,mask)

矩阵类型的转换：
使用函数：convertTo（dst，rtype，alpha = 1，beta = 0）
dst:目标图像
rtype:期望的类型

访问和修改像素

1. data

let row = 3, col = 4;
let src = cv.imread("canvasInput");
if (src.isContinuous()) {
    let R = src.data[row * src.cols * src.channels() + col * src.channels()];
    let G = src.data[row * src.cols * src.channels() + col * src.channels() + 1];
    let B = src.data[row * src.cols * src.channels() + col * src.channels() + 2];
    let A = src.data[row * src.cols * src.channels() + col * src.channels() + 3];
}

data 获取适用于连续Mat，需用 isContinous()检测是否连续
2. at

let row = 3, col = 4;
let src = cv.imread("canvasInput");
let R = src.ucharAt(row, col * src.channels());
let G = src.ucharAt(row, col * src.channels() + 1);
let B = src.ucharAt(row, col * src.channels() + 2);
let A = src.ucharAt(row, col * src.channels() + 3);

at 仅适用于单通道，且不能修改

3. ptr(一般使用这个，比较简单方便)

let row = 3, col = 4;
let src = cv.imread("canvasInput");
let pixel = src.ucharPtr(row, col);
let R = pixel[0];
let G = pixel[1];
let B = pixel[2];
let A = pixel[3];

分割感兴趣矩形区域

使用函数：roi(rect)

创建矩形使用 new cv.Rect(100,100,200,200)

let rect=new cv.Rect(100,100,200,200)
dst=src.roi(rect)

图像的分割和合成

与 opencv-python 相同，使用 split和 merge 对图像分割与合成

let src = cv.imread("canvasInput");
//创建矩阵向量
let rgbaPlanes = new cv.MatVector();
// Split the Mat
cv.split(src, rgbaPlanes);
// Get R channel
let R = rgbaPlanes.get(0);
// Merge all channels
cv.merge(rgbaPlanes, src);
src.delete(); rgbaPlanes.delete(); R.delete();

给图像画边框

使用 copyMakeBorder()

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
// You can try more different parameters
let s = new cv.Scalar(255, 0, 0, 255);
cv.copyMakeBorder(src, dst, 10, 10, 10, 10, cv.BORDER_CONSTANT, s);
cv.imshow('canvasOutput', dst);
src.delete();
dst.delete();

图像运算操作

let src1=cv.imread('canvasInput1')
let src2=cv.imread('canvasInput2')
let dst=new cv.Mat()
//图像加操作
cv.add(src1,src2,dst)
//图像减操作
cv.subtract(src1,src2,dst)
cv.imshow('canvasOutput1',dst)


//按位操作
cv.bitwise_and(src1,src2,dst,mask)
cv.bitwise_or(src1,src2,dst,mask)
cv2.bitwise_not(src,dst)
cv2.bitwise_xor(src1,src2,dst,mask)

掩模操作

opencv 很多函数都带有mask，参数，当带有该参数参与运算时，先使用两个参数与mask参与运算后两个参数再参与运算，达到只对感兴趣区域操作的目的

问题：

再OpenCV.js 中使用掩模残参与运算后掩模黑色部分会变成白色，我觉得应该是会保留黑色啊，我使用 python-opencv 结果也是黑色，不知道OpenCV.js 为何是白色