What are the common image processing operations in OpenCV.js?

OpenCV.js provides rich image processing capabilities. Here are common image processing operations:

1. Color Space Conversion

javascript
// RGBA to grayscale
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);

// RGBA to RGB
cv.cvtColor(src, dst, cv.COLOR_RGBA2RGB);

// RGB to HSV
cv.cvtColor(src, dst, cv.COLOR_RGB2HSV);

2. Image Filtering

Gaussian Blur

javascript
let ksize = new cv.Size(5, 5);
cv.GaussianBlur(src, dst, ksize, 0, 0, cv.BORDER_DEFAULT);

Median Blur

javascript
cv.medianBlur(src, dst, 3);  // 3 is kernel size

Bilateral Filter (Edge Preserving)

javascript
cv.bilateralFilter(src, dst, 9, 75, 75);

3. Edge Detection

Canny Edge Detection

javascript
cv.Canny(src, dst, 50, 100, 3, false);
// Parameters: source, destination, low threshold, high threshold, Sobel kernel size, L2 gradient

Sobel Edge Detection

javascript
cv.Sobel(src, dst, cv.CV_8U, 1, 0, 3, 1, 0, cv.BORDER_DEFAULT);
// Parameters: source, destination, depth, dx, dy, kernel size, scale factor, delta, border type

4. Image Transformation

Resize

javascript
let dsize = new cv.Size(300, 300);
cv.resize(src, dst, dsize, 0, 0, cv.INTER_LINEAR);

Rotate

javascript
let center = new cv.Point(src.cols / 2, src.rows / 2);
let M = cv.getRotationMatrix2D(center, 45, 1);  // center, angle, scale
cv.warpAffine(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());

Affine Transform

javascript
let srcTri = cv.matFromArray(3, 1, cv.CV_32FC2, [0, 0, src.cols-1, 0, 0, src.rows-1]);
let dstTri = cv.matFromArray(3, 1, cv.CV_32FC2, [0, 0, src.cols-1, 0, 0, src.rows-1]);
let M = cv.getAffineTransform(srcTri, dstTri);
cv.warpAffine(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());

5. Thresholding

javascript
// Binary threshold
cv.threshold(src, dst, 127, 255, cv.THRESH_BINARY);

// Adaptive threshold
cv.adaptiveThreshold(src, dst, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, 
                     cv.THRESH_BINARY, 11, 2);

6. Morphological Operations

javascript
// Erosion
let M = cv.Mat.ones(3, 3, cv.CV_8U);
cv.erode(src, dst, M);

// Dilation
cv.dilate(src, dst, M);

// Opening (erosion followed by dilation)
cv.morphologyEx(src, dst, cv.MORPH_OPEN, M);

// Closing (dilation followed by erosion)
cv.morphologyEx(src, dst, cv.MORPH_CLOSE, M);

7. Image Arithmetic Operations

javascript
// Addition
cv.add(src1, src2, dst);

// Subtraction
cv.subtract(src1, src2, dst);

// Multiplication
cv.multiply(src1, src2, dst);

// Bitwise AND
cv.bitwise_and(src1, src2, dst);

// Bitwise OR
cv.bitwise_or(src1, src2, dst);

Complete Example: Image Processing Pipeline

javascript
function processImage(src) {
  let dst = new cv.Mat();
  let gray = new cv.Mat();
  let edges = new cv.Mat();
  
  try {
    // Convert to grayscale
    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
    
    // Gaussian blur
    cv.GaussianBlur(gray, gray, new cv.Size(5, 5), 0);
    
    // Canny edge detection
    cv.Canny(gray, edges, 50, 100);
    
    // Display result
    cv.imshow('canvasOutput', edges);
    
  } finally {
    gray.delete();
    edges.delete();
    dst.delete();
  }
}