da5be3851d
Datum editor (step 3): - Add world-axis role to rectangles (isAxisReference) and lines (axisRole: "x"|"y"). Exclusive via a new store action that clears any other axis flag on write. The solver's pickPrimary now honors an explicit user flag ahead of the type-priority fallback; line-primary correspondences target world +x or +y depending on the flag. - Panel UI: checkbox on rect cards, three-way button row on line cards, and an axis badge in each card header. - Ellipse datum switches to 8 user-placed points on the circle contour. New src/lib/ellipse-fit.ts does an algebraic LSQ conic fit (data- normalised, 5x5 Gaussian solve, f=-1 constraint) and returns the geometric center + perpendicular conjugate semi-axes, which we cache on the datum for the solver and renderer. Dragging any handle refits; an extra center handle translates all 8 points together. datum-cache migrates legacy 3-handle storage by synthesising 8 samples from the old parametric form. - ResultViewer auto-scale now floors to an int to match the integer- only scale input (step=1). Measurement tool (step 4) — CorrectedImageViewer.vue: - Three measurement tools: line (length), ellipse (semi-axes + area), angle (0-180 degrees between two rays). - Persistent, multi-measurement state. Each has id, colorIndex, and type-specific geometry; colors cycle via the existing getDatumColor palette with a monotonic counter so deletion doesn't recolor. - Selection model with hit-testing on handles, geometry, and labels. Selected draws on top in white; others render dashed with 0.8/0.5 alpha so the active measurement pops. - Dragging geometry or label moves the whole measurement; dragging a handle reshapes just that handle. 3px mouse threshold distinguishes click from drag. - Side panel lists measurements with color chip, type, value, and a delete button; clicking selects on canvas. Delete/Backspace deletes the selected measurement. Escape cancels in-progress placement. - Live placement preview + inline hint strip describes what the next click does. Pinch-zoom and single-finger pan still work. 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