Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

How to find contour vertices in JS? Editing/Understanging FindContours Points in JS

I want to draw a small circle in each vertex of the largest contour. I successfully found the largest contour but how to find the highest points on it?

I saw this example and this is exactly what I want to do but the answer is for c++. How to do this in JS? I've tried to write in JS but no success. Here is the simplified code that I wrote

const contours = new cv.MatVector();
const hierarchy = new cv.Mat();
cv.findContours(src, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);

const contoursSize = contours.size();

const contoursToDraw = new cv.MatVector();

for (let i = 0; i < contoursSize; ++i) {
const cnt = contours.get(i);

const cntSize = cnt.size().width * target.size().height;
for (let j = 0; j < cntSize; j++)
{
    const [x, y] = cnt.charPtr(j); //cnt[j] -> ?
    const vertex = { x, y };
    console.log('vertex', vertex);
    cv.putText(cnt,'some text', vertex, cv.FONT_HERSHEY_SIMPLEX,1, [255, 0, 255, 255]);
    cv.circle(cnt, vertex, 3, [0, 255, 0, 255], cv.FILLED);

}
contoursToDraw.push_back(cnt);
}

Then drawing contours on image and showing image.

What is the equivalent of ctr[i][j] in javascript? In general, if we have some Mat object

const imgElement = document.querySelector('#imageSrc');
const src = cv.imread(imgElement);

how access to its points coordinates?