bb8ea1929f
Mirror DatumCanvas/Konva: hit-test on every mousedown/touchstart, and let an existing-measurement hit win over both stage pan and placement tools. Empty-space presses fall through — to a placement (if a tool is active) or to a pan. Suppress the trailing click event when the press picked up a prior measurement so the placement tool doesn't commit a spurious new point right after a corner drag ends. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
- Upload a JPG or HEIC image (HEIC is converted automatically)
- Review EXIF data -- camera, lens, focal length
- Place datums on the image -- rectangles or lines with known real-world dimensions
- 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.
How Skwik compares
There are plenty of tools that do part of what Skwik does, but none that combine everything:
| Tool | Client-side | Multi-datum weighting | Real-world mm scale | Measurement tools | Scale bar export |
|---|---|---|---|---|---|
| Skwik | ✅ | ✅ | ✅ | ✅ | ✅ |
| MYOG Perspective Correction | ✅ | ❌ | ✅ | ❌ | ❌ |
| PerspectiveFix | ✅ | ❌ | ❌ | ❌ | ❌ |
| PicFix.pro | ✅ | ❌ | ❌ | ❌ | ❌ |
| ImageOnline Perspective | ✅ | ❌ | ❌ | ❌ | ❌ |
| Toolschimp Image Measure | ✅ | ❌ | ✅ | ✅ | ❌ |
| Aspose Deskew | ❌ | ❌ | ❌ | ❌ | ❌ |
Most deskew tools just pull 4 corners to a rectangle without any real-world dimensions -- the output has no scale. Most measurement tools calibrate against a single reference and don't correct perspective. Skwik uses multiple weighted datums (rectangles + lines, each with a confidence score) to solve both problems in one pass, and lets you measure distances or export with a scale bar on the corrected image.
License
MIT