Samuel Prevost 03d0f38476
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Deploy to GitHub Pages / deploy (push) Has been cancelled
fix(result): fix scale bar export, scale input UX, and auto-scale
- Fix scale bar checkbox: replace shadcn Checkbox (broken event
  propagation) with native input[type=checkbox] + v-model
- Scale input: use local string ref so user can type freely;
  red highlight when invalid, run button disabled until valid
- Auto-compute default scale to match input image dimensions,
  capped at 8192px output; cached scale takes priority

Co-Authored-By: Claude <noreply@anthropic.com>
2026-04-14 23:59:36 +02:00
2026-04-14 23:25:59 +02:00
2026-04-14 21:19:10 +02:00

Skwik

Client-side image deskewing tool. Upload a photo taken at an angle, place reference measurements on known objects, and get a perspective-corrected output with real-world scale.

Everything runs in the browser -- no server, no uploads.

How it works

  1. Upload a JPG or HEIC image (HEIC is converted automatically)
  2. Review EXIF data -- camera, lens, focal length
  3. Place datums on the image -- rectangles or lines with known real-world dimensions
  4. Run correction -- OpenCV.js computes a perspective transform and outputs a corrected image

The algorithm

The highest-confidence rectangle datum defines the initial perspective correction via getPerspectiveTransform. All other datums (rectangles and lines) are projected through that transform and measured. Per-axis weighted scale corrections are computed from the discrepancies, folded back into the destination rectangle, and a single clean warpPerspective produces the output. One matrix, one warp, no post-hoc distortion.

Datum confidence scores (1--5) act as weights in the correction.

Quick start

pnpm install
pnpm dev

Open http://localhost:5173.

Build

pnpm build      # type-check + production build
pnpm preview    # serve the build locally

Lint & format

pnpm lint       # eslint (strict TS + Vue)
pnpm lint:fix   # auto-fix
pnpm format     # prettier
pnpm type-check # vue-tsc

Stack

Layer Tech
Framework Vue 3 + TypeScript (strict)
Build Vite
Components shadcn-vue + Tailwind CSS v4
Canvas Konva.js + vue-konva
CV OpenCV.js 4.12 (WASM)
HEIC heic-to
EXIF exifr
State Pinia

Datum presets

Rectangles: A3, A4, A5, A6, 15x10 cm. Custom dimensions supported. Lines: any length.

License

MIT

Description
Client-side image deskewing tool. Upload a photo taken at an angle, place reference measurements on known objects, and get a perspective-corrected output with real-world scale.
https://serv.e1n.sh/skiwk
Readme GPL-3.0 1.2 MiB
Languages
Vue 74.1%
TypeScript 24.7%
CSS 1.1%