Scanic 📄⚡

Ultra-fast, production-ready document scanning for the modern Web.

Scanic is a high-performance document scanner library that brings professional-grade document edge detection and perspective correction to the browser and Node.js. By combining Rust-powered WebAssembly for pixel crunching and GPU-accelerated Canvas for image warping, Scanic delivers near-native performance (~10ms transforms) with a tiny footprint.

Live Demo | Framework Examples | API Reference

---

🚀 Why Scanic?

Traditional web scanning solutions often force a trade-off:
- OpenCV.js: Powerful, but requires a massive 30MB+ download.
- Pure JS: Lightweight, but struggles with real-time performance and complex transforms.

Scanic bridges this gap:
- Hybrid Engine: Rust/WASM handles the CPU-heavy edge detection.
- Turbo Warp: Custom Triangle Subdivision algorithm utilizes the GPU for perspective correction.
- Zero Latency: Designed for real-time applications like webcam scanning.

---

✨ Features

- 🎯 Pinpoint Accuracy: Robust document contour detection even in low-contrast environments.
- ⚡ Turbocharged Warp: Perspective transforms in < 10ms (vs 500ms+ in standard loops).
- 🦀 WASM Core: High-performance Gaussian Blur, Canny Edge Detection, and Dilation.
- 🛠️ Modern API: Clean, Promise-based API with full TypeScript support.
- 📦 Featherweight: Under 100KB total size (gzipped).
- 🧪 Production Grade: Built-in regression tests with physical image baselines.

---

🛠️ Installation

``bash


via npm

npm install scanic

via yarn

yarn add scanic
`

$3

`html

`

---

🎮 Demo

Try the interactive scanner in your browser:
👉 Open Scanic Live Demo

---

📖 Usage

$3

`js
import { scanDocument, extractDocument } from 'scanic';

// Simple usage - just detect document
const result = await scanDocument(imageElement);
if (result.success) {
console.log('Document found at corners:', result.corners);
}

// Extract the document (with perspective correction)
const extracted = await scanDocument(imageElement, { mode: 'extract' });
if (extracted.success) {
document.body.appendChild(extracted.output); // Display extracted document
}
`

$3


The Scanner class maintains a persistent WebAssembly instance, avoiding the overhead of re-initializing WASM for every scan.

`js
import { Scanner } from 'scanic';

const scanner = new Scanner();

// Initialize once (optional, scan() will initialize if needed)
await scanner.initialize();

// Scan multiple images efficiently
async function onFrame(img) {
const result = await scanner.scan(img, { mode: 'extract' });
if (result.success) {
// Process result...
}
}
`

$3

`js
import { scanDocument } from 'scanic';

async function processDocument() {
// Get image from file input or any source
const imageFile = document.getElementById('fileInput').files[0];
const img = new Image();

img.onload = async () => {
try {
// Extract and display the scanned document
const result = await scanDocument(img, {
mode: 'extract',
output: 'canvas'
});

if (result.success) {
// Add the extracted document to the page
document.getElementById('output').appendChild(result.output);

// Or get as data URL for download/display
const dataUrl = result.output.toDataURL('image/png');
console.log('Extracted document as data URL:', dataUrl);
}
} catch (error) {
console.error('Error processing document:', error);
}
};

img.src = URL.createObjectURL(imageFile);
}

// HTML setup
//
//


`

⚙️ API Reference

$3

The primary function for detecting and extracting documents.

| Parameter | Type | Description |
| :--- | :--- | :--- |
| image | HTMLImage\|Canvas\|ImageData | The source image to scan. |
| options | Object | Configuration options (see below). |

#### options Properties
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| mode | 'detect' \| 'extract' | 'detect' | 'detect' returns coordinates; 'extract' returns the warped image. |
| output | 'canvas' \| 'imagedata' \| 'dataurl' | 'canvas' | The format of the returned processed image. |
| maxProcessingDimension | number | 800 | Downscales image to this size for detection (faster). |
| lowThreshold | number | 75 | Lower threshold for Canny edge detection. |
| highThreshold | number | 200 | Upper threshold for Canny edge detection. |
| minArea | number | 1000 | Minimum pixel area to consider a contour a "document". |
| debug | boolean | false | If true, returns intermediate processing steps. |

#### Return Value
Returns a Promise:
`ts
{
success: boolean; // Did we find a document?
corners: CornerPoints; // { topLeft, topRight, bottomRight, bottomLeft }
output: any; // The warped image (if mode is 'extract')
contour: Array; // Raw detection points
timings: Array