ImageCrop Pro is a powerful, browser-based image cropping tool built for photographers, designers, and content creators who need multi-crop precision, advanced controls, and responsive performance. Developed in React and TypeScript, it offers professional features in an intuitive and modern interface.
- Create unlimited crop areas on a single image
- Independent position, size, and rotation per crop
- Constrained to image boundaries with real-time visual feedback
- Resize via draggable blue handles
- Drag & Drop crop movement
- Rotation via sidebar or keyboard shortcuts
- Aspect Ratio presets:
1:1,3:4,4:3,16:9,21:9 - Grid system for uniform multi-crop layouts
- Desktop: Three-panel layout with dedicated tools
- Mobile: Tab-based, single-panel adaptive interface
- Full touch support (drag, pinch-to-zoom, long-press)
- Color-coded crops: Blue (selected), Green (regular), Purple (grid), Red (out-of-bounds)
- Image boundary indicators & crop dimension status
- Visual grid connections and synchronization status
- Dual view modes: Context view and crop-only
- Zoom, pan, and interactive crop manipulation
- Mobile-friendly, responsive modal editor
- Generate M×N crop grids with spacing
- Synchronized properties across grid-linked crops
- Unlink for individual crop editing
- Batch export all or selected crops
| Action | Shortcut |
|---|---|
| Navigate | Tab, Shift+Tab |
| Move | Arrow Keys, Shift+Move |
| Resize | Ctrl + Arrow Keys |
| Rotate | R/L, [ or ] |
| Duplicate | Ctrl + D |
| Delete | Del |
| Aspect Ratios | Alt + 1~6 |
- Formats: PNG (lossless), JPEG (compressed), WebP (modern)
- Adjustable compression settings
- Batch export all or selected crops
- Custom filenames and real-time export preview
- Right-click: Duplicate, Edit, Fit to Image, Delete
- Mobile long-press for context actions
- Modular, scalable architecture
- Canvas-based rendering with high performance
- React hooks for efficient state handling
- Unified mouse/touch event system
- Image coordinate-based crop storage
- Canvas coordinate conversions for UI display
- Zoom-aware calculations & boundary enforcement
- Native touch gestures
- Responsive breakpoints for all screen sizes
- Optimized performance on mobile devices
- Touch-friendly controls & larger UI targets
- Sleek Dark Theme
- Smooth animations and micro-interactions
- Clear information hierarchy
- Aesthetic, accessible interface
- 100% Client-side Processing
- No image uploads or server dependency
- No tracking or analytics – privacy-first
- Canvas redraw optimization
- Handles high-resolution images efficiently
- Real-time interaction at 60 FPS
- Fast, high-quality exports
| Type | Supported |
|---|---|
| Input | JPEG, PNG, WebP, static GIF |
| Output | PNG, JPEG, WebP |
| Size Limit | Up to 10MB (browser dependent) |
| Resolution | High-res support with zoom |
- Frontend: React + TypeScript
- Rendering: HTML5 Canvas API
- Styling: Tailwind CSS / CSS Modules
- State Management: React Hooks
# 1. Clone the repo
git clone https://github.com/your-username/imagecrop-pro.git
cd imagecrop-pro
# 2. Install dependencies
npm install
# 3. Start development server
npm run dev