Displaying Opencv.js Matrix without cv.imshow()

Hello Stack Overflow community.

I am attempting to extract the pixel values from a cropped section of an opencv matrix to a javascript array in order to feed that data into a tensor for OCR. I cannot use cv.imshow() because it interacts with the DOM and my process is on a web worker.

This is what I have so far to convert from Opencv to js array:

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let rect = new cv.Rect(100, 100, 300, 300);
dst = src.roi(rect);

// equivalent(ish) to cv.imshow();
let canvas = document.getElementById('canvasOutput');
let context = canvas.getContext('2d');

let imageData = context.createImageData(dst.cols, dst.rows);
imageData.data.set(new Uint8ClampedArray(dst.data, dst.cols, dst.rows));

canvas.height = dst.rows;
canvas.width = dst.cols;

context.putImageData(imageData, 0, 0);
// end cv.imshow()

src.delete();
dst.delete();

If you paste this code into Opencv IDE and click try it the output seems to be offsetting weirdly. What am I doing wrong here?

Thanks in advance for the help!!

Answer

I believe this should help you:

let mat = new cv.Mat();
// Initialise a MatVector
let matVec = new cv.MatVector();
// Push a Mat back into MatVector
matVec.push_back(mat);
// Get a Mat fom MatVector
let cnt = matVec.get(0);
mat.delete(); matVec.delete(); cnt.delete();

Refer the opencv.js documentation link for more details.

Advertisement

Answer