Module 01
Image Reading & Display
Read image using OpenCV, convert BGR to RGB, display on canvas
Original (BGR)
Upload an image to begin
RGB Converted
BGR to RGB output
// OpenCV.js — BGR to RGB conversion
let src = cv.imread('imageElement');
let rgbImg = new cv.Mat();
cv.cvtColor(src, rgbImg, cv.COLOR_BGR2RGB); // BGR to RGB
cv.imshow('outputCanvas', rgbImg);
src.delete(); rgbImg.delete(); // Free WASM memory
Module 02
Image Properties
Rows, columns, channels, total pixels, total RGB values, resolution
Image Preview
Upload an image to analyze its properties
Module 03
Color & Intensity Analysis
Grayscale conversion, intensity values, BGR channel splitting, RGB channel analysis
Original
Upload an image
Result
Apply an operation
Module 04
Histogram Analysis
Grayscale histogram, binned histogram, RGB color histogram, histogram comparison
Bin count
Source Image
Upload an image
Grayscale Preview
Grayscale preview
Grayscale Histogram
RGB Color Histogram
Histogram Comparison
Compare with the globally loaded image
2nd image for comparison
Upload a second image to see metrics
Module 05
Image Transformations
Negative transformation, brightness, contrast, alpha-beta transformation
Original
Upload an image
Result
Apply a transformation
Transformation Controls
Brightness (β)
0
Contrast (α)
1.00x
Alpha-Beta transform:
output = α × pixel + β
Alpha (α)
1.00
Beta (β)
0
Module 06
Thresholding
Manual thresholding with histogram comparison and small matrix example
Original
Upload an image
Threshold Result
Threshold output
Threshold Controls
Threshold
127
Type
Histogram Comparison — Before vs After
Matrix Example — 5 × 5
Threshold value
127
Input Matrix
Output Matrix
Module 07
Geometric Transformations
Flip, rotation (90° and 1–360°), translation, scaling (OpenCV and manual)
Original
Upload an image
Result
Apply an operation
Operations
Flip
Rotation
Custom angle
45°
Translation
Tx (X offset)
50px
Ty (Y offset)
50px
Scaling
Scale X
1.00x
Scale Y
1.00x
Method
Module 08
Interpolation Techniques
Nearest Neighbor vs Cubic interpolation — side by side comparison
Scale Factor
Scale
2.00x
Original
Upload an image
Nearest Neighbor
NN result
Cubic
Cubic result
INTER_NEAREST — Fast, pixelated. Assigns the value of the closest source pixel with no blending. Artifacts visible at high scale factors.
INTER_CUBIC — Smooth, bicubic. Uses a 4×4 neighborhood of source pixels and applies a weighted average. Better edge preservation at the cost of computation.
INTER_CUBIC — Smooth, bicubic. Uses a 4×4 neighborhood of source pixels and applies a weighted average. Better edge preservation at the cost of computation.
Module 09
Face Detection & Cropping
Haar Cascade face detection — detects and crops faces from the uploaded image
Source Image
Upload an image with faces
Detection Result
Detected faces appear here
haarcascade_frontalface_default.xml — A pre-trained Haar Cascade classifier. Uses sliding window + integral images for fast feature detection. Loaded from OpenCV GitHub on first use (requires internet).
For best results: clear front-facing photo, good lighting, minimal occlusion.
For best results: clear front-facing photo, good lighting, minimal occlusion.