Paper Detection and Perspective Correction Using OpenCV.js

Introduction

With the recent popularity of facial recognition and AI beautification on mobile devices, OpenCV has become a prominent computer vision library. OpenCV.js brings the library to JavaScript developers by compiling the C++ core to WebAssembly via Emscripten, enabling efficient image processing directly in the browser.

Preparation

Instead of building OpenCV.js from source, the pre‑compiled script can be included with a <script> tag, which exposes a global cv object containing all functions and constants.

OpenCV.js Basic Concepts and Operations

Matrix (Mat)

Images are manipulated as cv.Mat objects.

let img = new cv.Mat();

Image Reading and Display

Use cv.imread to load an image from an <img> or <canvas> element and cv.imshow to render it to a canvas.

// 读取图像转换为矩阵
let img = cv.imread(new Image() || id);
// 输出图像到canvas
cv.imshow(document.createElement('canvas') || id, img);

Application: Paper Detection and Correction

Main Process

1. Resize the input image to a predefined size to standardize processing and reduce computation time.

const dsize = new cv.Size(this.width, this.height);
let dst = new cv.Mat();
// 重置图像大小
cv.resize(src, dst, dsize, 0, 0, cv.INTER_AREA);

2. Convert to grayscale and apply Gaussian blur to suppress noise.

// 转灰度图像
cv.cvtColor(img, img, cv.COLOR_RGB2GRAY);
// 高斯滤波
cv.GaussianBlur(img, img, new cv.Size(5, 5), 0, 0);

3. Perform Canny edge detection to obtain edge maps. cv.Canny(img, img, 20, 50, 3); // 边缘提取 4. Find all contours, then select the largest closed contour whose area exceeds 30% of the image area.

let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
// 找出所有轮廓，并遍历筛选
cv.findContours(img, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_NONE);
let index = 0, maxArea = 0;
if (!contours.size()) return;
const area = this.width * this.height;
for (let i = 0; i < contours.size(); ++i) {
  let tempArea = Math.abs(cv.contourArea(contours.get(i)));
  if (tempArea > maxArea && tempArea > 0.3 * area) {
    index = i;
    maxArea = tempArea;
  }
}

5. Approximate the selected contour with a polygon; if the polygon has four vertices, the paper is considered detected.

if (maxArea === 0) return;
const foundCours = contours.get(index);
const arcL = cv.arcLength(foundCours, true);
let tmp = new cv.Mat();
// 逼近多边形
cv.approxPolyDP(foundCours, tmp, 0.01 * arcL, true);
if (tmp.total() === 4) {
  let points = [];
  const data32S = tmp.data32S;
  for (let i = 0, len = data32S.length / 2; i < len; i++) {
    points[i] = { x: data32S[i * 2] - this.edge, y: data32S[i * 2 + 1] - this.edge };
  }
  return points;
}

6. Order the four corner points, compute the perspective transformation matrix, and warp the original image to obtain a corrected, top‑down view.

// 投影变换
cv.warpPerspective(this.src, target, transmtx, target.size());

Encountered Issues

When the image contains heavy noise, the polygon approximation may fail to produce a quadrilateral. Alternative strategies such as Hough line detection are suggested, though they are computationally expensive and are used only as a fallback.

Canny edge detection also struggles when the paper is partially outside the frame or when its color closely matches the background; padding the image borders or employing more advanced edge detectors (e.g., HED) can mitigate these problems.

Conclusion

The article provides a concise overview of OpenCV.js fundamentals and demonstrates its application to paper detection and perspective correction, highlighting both its capabilities and practical challenges. OpenCV.js also supports deep neural networks, promising broader use cases in the future.

References

OpenCV.js documentation: https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html OpenCV.js download: https://docs.opencv.org/3.4.14/opencv.js Intro to OpenCV.js: https://zhuanlan.zhihu.com/p/50428738 Paper edge detection in Java: https://www.cnblogs.com/josephkim/p/8319069.html Mobile CNN document detection: http://fengjian0106.github.io/2017/05/08/Document-Scanning-With-TensorFlow-And-OpenCV/