图像入门

目标

• 学习如何读取图像以及如何在网页中显示图像。

读取图像

OpenCV.js 将图像保存为 cv.Mat 类型。我们使用 HTML 画布元素将 cv.Mat 传输到网页或反之。ImageData 接口可以表示或设置画布元素区域的底层像素数据。

注意

有关更多详细信息，请参阅画布文档。

首先，从画布创建 ImageData 对象

let canvas = document.getElementById(canvasInputId);
let ctx = canvas.getContext('2d');
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

然后，使用 cv.matFromImageData 构造一个 cv.Mat

let src = cv.matFromImageData(imgData);

注意

由于画布仅支持具有连续存储的 8 位 RGBA 图像，因此 cv.Mat 类型为 cv.CV_8UC4。这与原生 OpenCV 不同，因为原生 imread 和 imshow 返回和显示的图像的通道存储顺序为 BGR。

显示图像

首先，将 src 的类型转换为 cv.CV_8UC4

let dst = new cv.Mat();
// scale 和 shift 用于将数据映射到 [0, 255]。
src.convertTo(dst, cv.CV_8U, scale, shift);
// *** 是 GRAY、RGB 或 RGBA，根据 src.channels() 是 1、3 或 4 来确定。
cv.cvtColor(dst, dst, cv.COLOR_***2RGBA);

然后，从 dst 创建一个 ImageData 对象

let imgData = new ImageData(new Uint8ClampedArray(dst.data), dst.cols, dst.rows);

最后，显示它

let canvas = document.getElementById(canvasOutputId);
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = imgData.width;
canvas.height = imgData.height;
ctx.putImageData(imgData, 0, 0);

在 OpenCV.js 中

OpenCV.js 使用上述方法实现图像读取和显示。

我们使用 cv.imread (imageSource) 从 html 画布或 img 元素读取图像。

参数

imageSource

画布元素或 id，或 img 元素或 id。

返回值

通道存储顺序为 RGBA 的矩阵。

我们使用 cv.imshow (canvasSource, mat) 显示它。该函数可能会根据矩阵的深度缩放矩阵。

• 如果矩阵是 8 位无符号，则按原样显示。
• 如果矩阵是 16 位无符号或 32 位整数，则像素除以 256。也就是说，值范围 [0,255*256] 映射到 [0,255]。
• 如果矩阵是 32 位浮点，则像素值乘以 255。也就是说，值范围 [0,1] 映射到 [0,255]。

参数

canvasSource	画布元素或 id。
mat	要显示的矩阵。

上述图像读取和显示代码可以简化为如下所示。

let img = cv.imread(imageSource);
cv.imshow(canvasOutput, img);
img.delete();

尝试一下