🎨 Image Tools

A professional-grade web-based image editing tool with advanced cropping, filtering, watermarking, and batch processing capabilities. Built with vanilla JavaScript and modern web technologies.

✨ Features

🖼️ Image Management

• Multiple Upload Methods: File upload, drag & drop, URL loading, and clipboard paste
• Batch Processing: Upload and process multiple images simultaneously
• Format Support: JPEG, PNG, WebP with quality control
• Export Options: Customizable quality settings and format selection

✂️ Advanced Cropping

• Interactive Cropper: Powered by Cropper.js for precise control
• Aspect Ratios: Free, 1:1 (Square), 16:9 (Landscape), 9:16 (Portrait)
• Grid Overlay: Rule of thirds guide for better composition
• Real-time Preview: Live preview with crop dimensions and position
• Rotation: Precise angle control with slider and input (-180° to 180°)
• Zoom: Smooth zoom control (10% to 300%)
• Flip: Horizontal and vertical flip options

🎨 Filters & Adjustments

• Brightness: 0% to 200%
• Contrast: 0% to 200%
• Saturation: 0% to 200%
• Hue Rotation: 0° to 360°
• Blur: 0px to 20px
• Grayscale: One-click black & white conversion
• Sepia: Vintage photo effect

💧 Watermark System

• Text Watermark: Custom text with full typography control
• Font Options: 10+ professional fonts including Noto Sans Thai
• Font Weight: Normal and Bold
• Color Picker: Full RGB color selection
• Opacity Control: 0% to 100% transparency
• Rotation: -180° to 180° angle adjustment
• Position Control: X/Y offset adjustment (-200px to 200px)
• Pattern Mode: Repeat watermark across entire image
• Real-time Preview: Live watermark preview before applying

🗜️ Image Compression

• Quality Control: Adjustable compression quality (0-100%)
• Format Selection: Support for JPEG, PNG, and WebP formats
• Real-time Preview: Live preview of compressed image
• Size Comparison: Display original vs compressed file sizes
• Reduction Percentage: Shows compression ratio achieved
• Apply/Reset: Easy controls to apply or reset compression

🔄 Comparison

• Before/After Slider: Interactive comparison slider
• Side-by-Side View: Compare original and edited images
• Smooth Animation: Fluid slider interaction

📜 History Management

• Undo/Redo: Full history tracking with keyboard shortcuts
• State Preservation: Maintains all edits and adjustments

⌨️ Keyboard Shortcuts

• Ctrl+Z: Undo
• Ctrl+Y: Redo
• Ctrl+V: Paste image from clipboard
• Enter: Load image from URL (when URL input is focused)

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions, issues and feature requests are welcome!

⭐ Show your support

Give a ⭐️ if this project helped you!

📝 Author

Made with ❤️ by @jirateep12z