Example

Drop & scan

Drop a document photo and watch quadscan detect the corners and rectify the perspective.

Drop an image here or click to upload

PNG, JPG, WEBP. Stays in your browser.

Source code for this example

import { Quadscan } from 'quadscan';

const drop = document.getElementById('drop')!;
const file = document.getElementById('file') as HTMLInputElement;

async function handle(blob: Blob) {
  const result = await Quadscan.scan(blob, {
    mode: 'extract',
    onProgress: (e) => updateStatus(e),
  });
  if (!result.success) {
    setStatus(result.message);
    return;
  }
  // result.corners: overlay on original
  // result.output:  HTMLCanvasElement of warped doc
  // result.confidence, result.timings
  appendOriginalWithOverlay(blob, result.corners);
  appendWarped(result.output);
  appendStats(result);
}

drop.addEventListener('drop', (e) => {
  e.preventDefault();
  const f = e.dataTransfer?.files[0];
  if (f) handle(f);
});
file.addEventListener('change', () => file.files?.[0] && handle(file.files[0]));