OpenCV  3.4.20-dev
Open Source Computer Vision
Getting Started with Images


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.

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

imageSourcecanvas element or id, or img element or id.
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:

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

Try it