Skip to content
opencv-wasm

Box filtering

Algorithm atlasFiltering

Average a rectangular neighbourhood with equal weight at every position.

Try it on your image ↓

VISUAL WALKTHROUGHFiltering
REFERENCE INPUTNoisy or uneven image

The same scene stays here while the working view changes.

RESULTApply the rule at every pixel

The whole image has now been processed. The highlighted input value 156 becomes 130.1.

STEP 03 / 03

Divide by the area when normalization is enabled.

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 ↗

Average the colour image with a square box.

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

Compute local means, local variance, and inexpensive smoothing over large windows.

How it works

  1. 01Select a rectangular window.
  2. 02Sum its samples with equal weights.
  3. 03Divide by the area when normalization is enabled.

mean = Σ window / number of samples

What to tune

ksize chooses the neighbourhood; normalize selects an average or a sum; ddepth controls overflow and precision.

Where it breaks down

Equal weights can leave block-shaped blur and suppress edges. sqrBoxFilter averages squared values, useful with a local mean for variance.

TypeScript API

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

blurReference →boxFilterReference →sqrBoxFilterReference →

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

Gaussian blur

Replace each pixel with a weighted average that gives nearby pixels more influence.

Median filtering

Choose the middle value of a pixel neighbourhood instead of averaging its intensities.

Bilateral filtering

Smooth nearby pixels only when their colours are also similar.

Custom correlation kernels

Apply your own linear filter to every pixel neighbourhood.