quadscan

ML-powered document scanner for the browser.
Detects the four corners of a document and warps it to an axis-aligned rectangle.

Documentation  ·  Live demo

---

100% client-side. No backend.

import { Quadscan } from 'quadscan';
const r = await Quadscan.scan(file, { mode: 'extract' });
console.log(r);
// { success: true, corners: { topLeft, topRight, bottomRight, bottomLeft },
//   output: HTMLCanvasElement, confidence: 0.95, timings: [...] }

Powered by DocAligner (LCNet-100 default, FastViT-T8 opt-in) running via onnxruntime-web (WebGPU → WASM fallback). ~4 KB gz of library code; the ~330 KB onnxruntime-web runtime and the 4.5 MB model are fetched lazily on the first scan().

Install

npm install quadscan
# or
pnpm add quadscan
# or
yarn add quadscan
# or
bun add quadscan

Or via CDN, no bundler:

<script src="https://cdn.jsdelivr.net/npm/quadscan/dist/quadscan.iife.js"></script>
<script>
  const r = await Quadscan.scan(image);
  console.log(r.corners); // { topLeft, topRight, bottomRight, bottomLeft }
</script>

Usage

import { Quadscan } from 'quadscan';

// Lazy singleton, fine for one-off scans
const r = await Quadscan.scan(image, { mode: 'extract' });
console.log(r);

// Warm instance. Keeps the ORT session hot across calls.
const q = new Quadscan({ model: 'fastvit' });
await q.initialize();
for (const frame of frames) {
  const r = await q.scan(frame, { mode: 'detect' });
  console.log(r.corners);
}
q.dispose();

Accepts HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ImageData | Blob | File.

Why quadscan

Existing browser scanners use classical CV (Canny + contours). That works on clean photos and breaks on shadows, low contrast, or beige documents on beige tables. quadscan runs a small ConvNet trained on DocAligner's dataset. Robust to those cases at the cost of ~5 MB of weights downloaded once and cached.

	quadscan	jscanify	OpenCV.js
Approach	ML (ONNX)	Canny + contours	Canny + contours
Library bundle	~4 KB gz	~31 MB	~30 MB
Robust to shadows / low contrast	yes	no	partial
TypeScript	yes	no	yes

Documentation

Full API reference, interactive examples, and recipes: https://storrealbac.github.io/quadscan

License

MIT. See LICENSE.

Detector model: DocAligner by DocsaidLab, distributed under Apache 2.0. Attribution lives in licenses/DocAligner-LICENSE.txt.