Photo Crop Studio
Drag, resize and rotate a crop box, then export exactly that region.
IntermediateWeb appMedia12–24hAI-buildable 4/5no setup
A crop tool with a draggable, resizable selection, aspect-ratio locking, and rotation. It looks simple and is full of fiddly geometry — resize handles that behave correctly from every corner, and an export that maps the on-screen selection back onto the source image's real pixels.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Load an image and overlay a draggable crop box
- Eight resize handles, each behaving correctly from its corner or edge
- Aspect ratio can be locked to common presets or freeform
- The area outside the crop is dimmed
- Rotation in 90-degree steps
- Export the cropped region at the source image's real resolution
- The crop box can't be dragged outside the image bounds
The interesting part
- Resize handle maths that stays correct when dragged past the opposite edge
- Mapping display coordinates back to source pixel coordinates for export
- Combining rotation with cropping without compounding errors
Once it works
- Add free-angle rotation with a straightening guide
- Add zoom and pan for precise cropping
- Add a before-and-after comparison
Suggested stack
reacttypescripttailwindcanvas-api