How to perform feature detection and matching in OpenCV.js?

OpenCV.js provides powerful feature detection and description capabilities. Here are common feature detection methods:

1. Corner Detection

Harris Corner Detection

javascript
let src = cv.imread('canvasInput');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);

let corners = new cv.Mat();
let qualityLevel = 0.01;
let minDistance = 10;
let blockSize = 3;
let k = 0.04;

cv.goodFeaturesToTrack(gray, corners, 100, qualityLevel, minDistance, 
                        new cv.Mat(), blockSize, false, k);

2. Edge Detection

Canny Edge Detection

javascript
let edges = new cv.Mat();
cv.Canny(gray, edges, 50, 100, 3, false);

3. Keypoint Detection

ORB Feature Detection

javascript
let orb = new cv.ORB();
let keypoints = new cv.KeyPointVector();
let descriptors = new cv.Mat();

orb.detectAndCompute(gray, new cv.Mat(), keypoints, descriptors);

SIFT Feature Detection (requires additional module)

javascript
let sift = cv.SIFT_create();
let keypoints = new cv.KeyPointVector();
let descriptors = new cv.Mat();

sift.detectAndCompute(gray, new cv.Mat(), keypoints, descriptors);

4. Feature Matching

Brute Force Matcher

javascript
let matcher = new cv.BFMatcher(cv.NORM_HAMMING, true);
let matches = new cv.DMatchVector();

matcher.match(descriptors1, descriptors2, matches);

FLANN Matcher

javascript
let matcher = new cv.FlannBasedMatcher();
let matches = new cv.DMatchVector();

matcher.knnMatch(descriptors1, descriptors2, matches, 2);

5. Contour Detection

javascript
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();

cv.findContours(binaryImage, contours, hierarchy, cv.RETR_EXTERNAL, 
                cv.CHAIN_APPROX_SIMPLE);

// Draw contours
let drawing = src.clone();
cv.drawContours(drawing, contours, -1, new cv.Scalar(0, 255, 0), 2);

6. Line Detection

Hough Line Transform

javascript
let lines = new cv.Mat();
cv.HoughLinesP(edges, lines, 1, Math.PI / 180, 50, 50, 10);

for (let i = 0; i < lines.rows; ++i) {
  let startPoint = new cv.Point(lines.data32S[i * 4], lines.data32S[i * 4 + 1]);
  let endPoint = new cv.Point(lines.data32S[i * 4 + 2], lines.data32S[i * 4 + 3]);
  cv.line(src, startPoint, endPoint, new cv.Scalar(0, 0, 255), 2);
}

7. Circle Detection

Hough Circle Transform

javascript
let circles = new cv.Mat();
cv.HoughCircles(gray, circles, cv.HOUGH_GRADIENT, 1, 60, 30, 50, 0, 0);

for (let i = 0; i < circles.cols; ++i) {
  let x = circles.data32F[i * 3];
  let y = circles.data32F[i * 3 + 1];
  let radius = circles.data32F[i * 3 + 2];
  let center = new cv.Point(x, y);
  cv.circle(src, center, radius, new cv.Scalar(0, 255, 0), 2);
}

8. Complete Example: Image Feature Matching

javascript
function matchFeatures(img1, img2) {
  let gray1 = new cv.Mat();
  let gray2 = new cv.Mat();
  let keypoints1 = new cv.KeyPointVector();
  let keypoints2 = new cv.KeyPointVector();
  let descriptors1 = new cv.Mat();
  let descriptors2 = new cv.Mat();
  let matches = new cv.DMatchVector();
  
  try {
    // Convert to grayscale
    cv.cvtColor(img1, gray1, cv.COLOR_RGBA2GRAY);
    cv.cvtColor(img2, gray2, cv.COLOR_RGBA2GRAY);
    
    // ORB feature detection
    let orb = new cv.ORB();
    orb.detectAndCompute(gray1, new cv.Mat(), keypoints1, descriptors1);
    orb.detectAndCompute(gray2, new cv.Mat(), keypoints2, descriptors2);
    
    // Feature matching
    let matcher = new cv.BFMatcher(cv.NORM_HAMMING, true);
    matcher.match(descriptors1, descriptors2, matches);
    
    // Draw matching results
    let result = new cv.Mat();
    cv.drawMatches(img1, keypoints1, img2, keypoints2, matches, result);
    
    cv.imshow('canvasOutput', result);
    
  } finally {
    gray1.delete();
    gray2.delete();
    descriptors1.delete();
    descriptors2.delete();
    matches.delete();
  }
}

Performance Optimization Tips

1. Image Preprocessing: Scale images before feature detection to improve speed
2. Choose Appropriate Detector: ORB is fast, SIFT/SURF are accurate but slow
3. Limit Feature Count: Set reasonable upper limit for feature points
4. Use Web Worker: Move time-consuming operations to background threads