Skip to content
opencv-wasm

Connected components

Algorithm atlasSegmentation

Give every connected foreground region a distinct integer label.

Try it on your image ↓

VISUAL WALKTHROUGHSegmentation
REFERENCE INPUTUnlabelled mask

All foreground pixels initially have the same value.

RESULT3 separate components

Colours represent integer labels. Numbered centroids come from each component’s actual pixel coordinates.

STEP 03 / 03

Accumulate per-label statistics and centroids.

Computed teaching example on a 24 × 16 image. Small kernels and simplified settings keep each change visible; use the image laboratory for native OpenCV.

Try it on an image

YOUR IMAGE · REAL OPENCV

Experiment at pixel level

Open full lab ↗

Label connected white regions. Colours encode label IDs; inspect the numeric ID underneath.

The engine loads on your first run. Your images stay in this browser.

Input448 × 320
OutputWaiting for a result

Scroll over either image to zoom at the pointer. Use the scrollbars to pan both views over the same relative area. Zoom is relative to the input; pixel coordinates belong to each image. Warps can change scene correspondence.

Pixel inspector RGBA · native values · matched scale · 9 × 9 output pixels
Hover to inspect. Click to pin a pixel.
Input 
Select a pixel

Output 
Select a pixel

Sample models and licenses

When to use it

Count objects, filter tiny regions, or measure areas, bounding boxes and centroids.

How it works

  1. 01Visit each foreground pixel and its selected neighbours.
  2. 02Merge labels that refer to the same connected region.
  3. 03Accumulate per-label statistics and centroids.

component = maximal connected set of nonzero pixels

What to tune

Connectivity 4 uses shared edges; 8 also joins diagonals. Label zero is the background.

Where it breaks down

Touching objects become one component. Label numbers are identifiers; they do not necessarily follow size or position.

TypeScript API

Open an entry for its exact overloads, parameter descriptions, result ownership and pinned upstream source.

connectedComponentsReference →connectedComponentsWithStatsReference →

All of these calls execute on the CPU. Native objects need explicit disposal. See matrices and ownership and build compatibility.

Global thresholding

Divide pixels using one intensity threshold, or choose it automatically with Otsu or the triangle method.

Adaptive thresholding

Compute a different intensity threshold for each local neighbourhood.

Contour tracing

Trace the boundary of each binary region as an ordered sequence of points.

Marker-based watershed

Grow labelled regions across an image until competing regions meet at boundaries.