Image Resizer & Crop Tool

✨ Professional web-based image editing suite - resize, crop, and transform images with advanced controls. Built with pure HTML, CSS, and JavaScript for blazing-fast, privacy-first image processing.

🚀 Key Features

🎨 Dual Editing Modes

• Resize Mode: Professional resizing with quality & DPI controls
• Crop Mode: Interactive mouse cropping with visual feedback

🖱️ Interactive Cropping

• Visual crop overlay with 3px purple border
• 4 Edge zones for single-direction resize (hover to highlight)
• Drag & move entire crop area anywhere on image
• Live coordinates in X/Y/Width/Height inputs
• Boundary constraints prevent cropping outside image

🔧 Advanced Resize Controls

• Quality slider (1-100%) for JPEG compression
• DPI settings: Web (72), Screen (96), Print (150), High Quality (300)
• Format selection: JPEG, PNG, WebP export
• Aspect ratio preservation when entering one dimension

🎪 Professional Upload

• Drag & drop images anywhere on page
• Click to browse with elegant file picker
• Supports: JPG, PNG, GIF, WebP formats
• Instant loading with progress feedback

🔄 Chained Operations

• Crop → Resize: Resize cropped images
• Resize → Crop: Crop resized results
• Unlimited chaining: Build complex edits step-by-step
• Persistent changes: Each operation becomes the new working image

💎 Premium User Experience

• Responsive design works on all devices
• Smooth animations and hover effects
• Tabbed interface with toggled sections
• Success notifications with auto-dismiss
• Professional styling with gradient themes
• Large preview area (up to 500px height) for precision work

⚙️ Technical Excellence

• Zero dependencies - pure vanilla JavaScript
• Canvas-based processing for pixel-perfect results
• FileReader API for private, local file handling
• Modern CSS Grid & Flexbox responsive layouts
• Touch support works on mobile/tablet devices

📖 Usage Guide

Basic Resize Workflow

1. Upload: Drag image or click upload area
2. Set dimensions: Enter width/height (auto-calculates aspect ratio)
3. Quality settings: Adjust compression & format
4. Resize: Click button for instant processing
5. Download: Save your resized image

Interactive Crop Workflow

1. Upload: Any supported image format
2. Switch to Crop: Click "Crop" tab
3. Interactive editing:
   • Drag blue overlay to move crop area
   • Drag corner circles for diagonal resize
   • Drag edges (hover to see) for single-axis resize
   • Type coordinates for precision placement
4. Crop & Download: Apply crop and get result

Advanced Chaining

1. Crop an image (creates cropped version)
2. Switch to Resize (cropped image shown)
3. Apply resize (resizes the cropped image)
4. Download final chained result

🛠️ Installation

git clone https://github.com/mrithip/image-resizer.git
cd image-resizer

No installation or dependencies required! Just open index.html in any modern browser.

🎯 Examples

Resize Example

• Input: 2000×1500 photo
• Output: 800×600 web-optimized image
• Quality: 85%, Format: JPEG
• Result: Perfect web-ready image

Crop Example

• Select precise area (500×300) from larger image
• Mouse-drag corners for perfect positioning
• Export cropped section instantly
• Chain with resize for complete workflow

Professional Workflow

• Photo shoot → Crop faces/objects
• Crop results → Resize for social media
• Final optimized images ready for publishing

📱 Browser Compatibility

Browser	Status	Features
Chrome 90+	✅ Full	All features supported
Firefox 88+	✅ Full	All features supported
Safari 14+	✅ Full	All features supported
Edge 90+	✅ Full	All features supported
Mobile Safari	✅ Limited	Touch crop, resize, upload

🎨 Technical Architecture

Core Technologies

• HTML5 Canvas: Pixel-perfect image processing
• FileReader API: Secure local file handling
• CSS Grid/Flexbox: Responsive layouts
• ES6 JavaScript: Modern, clean code

Performance

• Client-side only: No server uploads
• Instant processing: Files never leave your device
• Memory efficient: Canvas operations handle large files
• Progressive rendering: Images load and process smoothly

Security

• Zero network requests: All processing local
• No tracking/analytics: Complete privacy
• No external scripts: Self-contained application
• GDPR compliant: No personal data collection

🛠️ Development

File Structure

image-resizer/
├── index.html          # Main application
├── LICENSE             # MIT License
└── readme.md           # This documentation

Building

No build process required. The application is self-contained in a single HTML file with embedded CSS and JavaScript.

Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/new-tool)
3. Add your enhancement
4. Test across browsers
5. Submit pull request

📄 License

MIT License - Free for personal and commercial use.

🙏 Acknowledgments

• Built for photographers, designers, and web developers
• Inspired by the growing need for privacy-first web tools
• Modern UI patterns from leading web applications
• Thanks to the JavaScript community for amazing canvas APIs

---

Ready to transform your images? Open index.html and start creating! ✨📸