Live Preview: hasan-hadba.github.io/image-editor/
This project is a functional web-based image processing platform developed using core web technologies: HTML5, CSS3, and Vanilla JavaScript. By avoiding external libraries, this project demonstrates a solid understanding of DOM manipulation and CSS architectural patterns.
- Advanced Image Manipulation: Users can apply real-time filters and adjustments, including Contrast, Brightness, Saturation, Hue-rotate, and Gaussian Blur, to enhance their photos.
- UI Customization: The editor features a seamless Light and Dark Mode toggle, providing an optimized user experience for different lighting environments.
- Export Functionality: Leveraging the HTML5 Canvas API, the application processes all modifications and allows users to download and save their edited images directly to their local storage.
- Performance-Oriented: Designed with a clean and responsive interface, ensuring smooth performance and fast rendering across modern web browsers.
- HTML5: Structure and Canvas API.
- CSS3: Responsive styling and Dark Mode logic.
- Vanilla JavaScript: Core logic and image processing. =======
A modern, high-performance web-based image editor built with Vanilla JavaScript. This project demonstrates advanced DOM manipulation, Canvas API integration, and real-time state management.
This project isn't just about filters; it's about how JavaScript interacts with the browser's hardware and memory:
- Asynchronous File Handling: Utilizing
FileReaderto process image uploads and convert them into data streams without refreshing the page. - Dynamic UI States: The application intelligently enables or disables control buttons based on whether an image is active, preventing logical errors.
- Real-time Filter Engine: Implementing event listeners for multiple sliders to provide instantaneous visual feedback through CSS filter strings.
- Advanced Canvas Rendering:
- Automatically adjusts Canvas dimensions to perfectly match the original image resolution, ensuring no quality loss.
- Applies visual filters directly to the Canvas context before the final rendering process.
- Smart Download Logic: Programmatically creating a virtual link to trigger the browser’s download mechanism for the processed output.
- Theme Management: A seamless Dark/Light mode toggle that manipulates the global CSS state via Body class switching.
- HTML5: Semantic structure and Canvas element[cite: 1].
- CSS3: Modern UI with Glassmorphism effects, flexbox layout, and responsive design.
- JavaScript (ES6+): Core logic, Event Listeners, and Canvas API.
- Glassmorphism Container: A sleek, semi-transparent design that follows modern trends.
- Interactive Preview Box: Includes a smart placeholder system to guide the user.
- Responsive Layout: Fully functional on both desktop and mobile screens.
- Choose Image: Upload any photo from your device.
- Edit: Use the sliders to adjust brightness, contrast, blur, and more in real-time.
- Reset: Easily return to original settings with a single click.
- Save: Export your masterpiece directly to your device.
Hassan Hadba
Computer Science Student at SVU | Front-end Developer
(Enhance UI design with modern dark/light mode and responsive layout)