MuhammadLab
Computer VisionBrowser-basedOpenCV.jsHomography warpDocument scannerStudent lab

Perspective Transform and Document Scanner Tool

Select four corners on an uploaded image, compute an OpenCV.js perspective transform, and convert a tilted page or board into a corrected top-down view.

This page teaches a key computer vision idea: a camera image is not always front-facing. By selecting four source points and mapping them to a rectangle, students can see how document scanners, whiteboard capture apps, OCR workflows, and robot vision systems correct perspective distortion.

What this page teaches

Students can click four corners on a tilted page and see how a homography maps that quadrilateral back into a flat top-down rectangle.

Why perspective matters

Real cameras rarely capture paper or whiteboards perfectly front-on. Perspective correction helps document scanners, OCR systems, robotics pipelines, and AR overlays.

How OpenCV helps

OpenCV.js computes a perspective transform matrix from four source points and four destination points, then warps the image into a corrected view.

Engine: Loading OpenCV.js in the browser...
Image: None selected
Status: Upload an image or use a sample document, then click four corners in clockwise order.
Source image and corner points
Loading OpenCV.js...
Corrected top-down view
Select four points to compute the perspective transform.

How to use it

1. Upload a document-style photo or choose a sample.

2. Click the four page corners in clockwise order.

3. Review the corrected top-down view.

4. Reset points if you want to refine the corners.

5. Download the scanned result when you are satisfied.

What students should notice

A page that looks trapezoidal in the camera can become rectangular after the warp.

The selected corners define the quadrilateral that will be mapped into a rectangle.

Small corner-placement errors can noticeably change the corrected output.

Point Summary

No points yet. Click four document corners on the source image.

Geometry

Select all four corners to see the derived output size.

Calculation Breakdown

1. Source points: the four clicked image coordinates define a quadrilateral in the camera image.

2. Destination points: OpenCV maps those four coordinates to rectangle corners at (0, 0), (W - 1, 0), (W - 1, H - 1), and (0, H - 1).

3. Transform matrix: getPerspectiveTransform(src, dst) computes the 3x3 homography.

4. Warping: warpPerspective resamples the source image so the document appears flat.

Real-world uses

Document-scanner apps flatten receipts, forms, notes, and worksheets before OCR.

Whiteboard capture tools correct camera angle so text becomes easier to read and export.

Robotics and AR systems use perspective correction when a flat surface must be measured or aligned.