https://luc-constantin.github.io/Filter-image-App/
This project began as a simple JavaScript image filter tool and has since been significantly modernized. It now includes a redesigned upload experience, additional filters, responsive interface upgrades, theme detection, improved scaling, and a cleaner overall user experience.
The initial version included:
- A basic upload button
- No drag-and-drop support
- Unstyled buttons
- No theme system
- No image scaling (large images overflowed the page)
- Only 7 filters
- No option to remove the uploaded photo
- Very limited user interface and interaction
The upgraded version now includes:
- A drag-and-drop upload system with visual feedback
- Auto-scaling image logic to keep images inside the frame
- A redesigned, responsive interface
- 12 filters in total, including new enhancements
- A color-coded button system
- Glass-style UI elements
- Dark/Light theme detection
- A manual theme toggle
- A new "Remove Photo" feature with validation
- A cleaner filter engine and more modular JavaScript
- A centered upload overlay that hides automatically on image load
The transformation elevates the project from a simple demo into a polished, production-quality tool.
- Drag & Drop support
- Centered and polished upload zone
- Overlay hides once image is loaded
- Image automatically fits inside the visible frame
- Prevents overflow, stretching, or distorted scaling
Along with improving the original ones, the following filters were introduced:
- Smart Invert (improved version)
- Preserve Primary Colors
- Color Boost
- High Contrast
- Blue Tone
-
Glass-style rounded buttons
-
Smooth hover transitions
-
Color coding for main actions
- Clear = blue
- Download = green
- Remove Photo = red
-
Compact theme toggle button
-
Improved spacing and alignment
- Completely reorganized sidebar
- Responsive mobile behavior
- Canvas and upload frame aligned and centered
- Cleaner typography and spacing
The interface now matches the user's system preference. A popup displays the detected theme for a few seconds when the app loads.
Users can switch between dark and light themes at any time.
- Uses modern CSS variables for color themes
- Much easier to maintain and extend
- Asks for confirmation before deletion
- If there is no photo loaded, displays a notification
- Resets filters without removing the image
- Saves filtered output as a PNG file
- Full drag-and-drop for image upload
- Visual hover feedback
- Supports pointer and touch inputs
- Unified filter pipeline using a shared
applyFilter()function - Channel-swapping functions rewritten more safely
- Updated image redraw logic with correct scaling
- Button events properly bound and mapped
- Upload logic modernized for clarity and reliability
This project is based on an original idea by Chris Dixon (@chrisdixon161) Reference: https://fun-javascript-projects.com/
Luc (accolades.dev)