OpenCV  3.4.20
Open Source Computer Vision
Getting Started with Images

Goals

Read an image

OpenCV.js saves images as cv.Mat type. We use HTML canvas element to transfer cv.Mat to the web or in reverse. The ImageData interface can represent or set the underlying pixel data of an area of a canvas element.

Note
Please refer to canvas docs for more details.

First, create an ImageData obj from canvas:

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

Then, use cv.matFromImageData to construct a cv.Mat:

let src = cv.matFromImageData(imgData);
Note
Because canvas only support 8-bit RGBA image with continuous storage, the cv.Mat type is cv.CV_8UC4. It is different from native OpenCV because images returned and shown by the native imread and imshow have the channels stored in BGR order.

Display an image

First, convert the type of src to cv.CV_8UC4:

let dst = new cv.Mat();
// scale and shift are used to map the data to [0, 255].
src.convertTo(dst, cv.CV_8U, scale, shift);
// *** is GRAY, RGB, or RGBA, according to src.channels() is 1, 3 or 4.
cv.cvtColor(dst, dst, cv.COLOR_***2RGBA);

Then, new an ImageData obj from dst:

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

Finally, display it:

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);

In OpenCV.js

OpenCV.js implements image reading and showing using the above method.

We use cv.imread (imageSource) to read an image from html canvas or img element.

Parameters
imageSourcecanvas element or id, or img element or id.
Returns
mat with channels stored in RGBA order.

We use cv.imshow (canvasSource, mat) to display it. The function may scale the mat, depending on its depth:

Parameters
canvasSourcecanvas element or id.
matmat to be shown.

The above code of image reading and showing could be simplified as below.

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

Try it