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?
can't completely answer, but contours are usually lists of
int32
points, so yourcnt.charPtr(j)
looks wrongAfter your comment, I've tried
intPtr
instead ofcharPtr
and now it's work, thank you!! Is there a way to find how much these points are far from the vertical and horizontal edges?
^^ i'm glad to hear that !
the edges of what ? the image borders ? isn't that already in the coords ? e.g. dist to the bottom is
img.rows-y
Yes, I mean from the image borders and again you are right
img.rows-y
is what I need, thanks!!