Example

Manual corner correction

Auto-detect, then drag the four handles to fine-tune. The warped preview updates live.

Upload image

Source - drag the four handles

Live preview

Source code for this example

import { Quadscan } from 'quadscan';

const q = new Quadscan();
const src = document.getElementById('src') as HTMLCanvasElement;
const out = document.getElementById('out') as HTMLCanvasElement;
let img: ImageBitmap;
let corners: CornerPoints;

async function onPick(file: File) {
  img = await createImageBitmap(file);
  src.width = img.width;
  src.height = img.height;
  // Detect once.
  const r = await q.scan(src, { mode: 'detect' });
  if (!r.success) return;
  corners = r.corners;
  redraw();
}

// Drag handles update `corners`; re-extract on every move.
async function redraw() {
  src.getContext('2d').drawImage(img, 0, 0);
  // ...draw handles...
  const r = await q.extract(src, corners);
  out.width = r.output.width;
  out.height = r.output.height;
  out.getContext('2d').drawImage(r.output, 0, 0);
}