Samuel Prevost 11e8013b6a feat(cache): persist datums per file hash and user settings
- Add file-hash.ts: SHA-256 hash of uploaded files via Web Crypto API
- Add datum-cache.ts: localStorage save/load/clear for datums by hash
- Add settings-cache.ts: persist scalePxPerMm and includeScaleBar
- Restore datums from cache on re-upload of same file
- Discreet "Clear cache" button on upload page
- Store fileHash and cacheRestoreMessage in Pinia store
- Auto-save datums on every change via deep watcher
- Track maxStepReached for clickable step navigation

Co-Authored-By: Claude <noreply@anthropic.com>
2026-04-14 23:19:34 +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%