A modern, high-performance web application for editing images directly in the browser. Featuring a stunning Glassmorphism UI, real-time filtering, and professional-grade presets, this tool allows users to enhance photos instantly without uploading data to a server.
- 🖼️ Premium UI/UX: A fully responsive Glassmorphism interface powered by modern CSS variables and HSL color spaces.
- ⚡ Real-Time Editing: Instant feedback for brightness, contrast, saturation, blurred effects, and more using HTML5 Canvas.
- 📂 Drag & Drop: Seamlessly upload images by dragging them onto the interface or using the file picker.
- 🎨 One-Click Presets: Instantly apply professional looks like Vintage, Cinematic, Noir, and Glitch.
- 📱 Fully Responsive: Optimized for desktops, tablets, and mobile devices with touch-friendly sliders and controls.
- 🎥 Animation & Recording: Create dynamic "Cyber Glitch" effects and record/download them as
.webmvideos directly from the browser. - 📏 Image Size Reducer: Reduce photo dimensions and file size (KB) with precision. Features live size estimation and JPEG quality control.
- 🔒 Privacy First: All processing happens client-side. Your photos never leave your browser.
- Core: HTML5, Semantic Web Standards
- Styling: Vanilla CSS3 (Variables, Flexbox, Grid, Glassmorphism effects)
- Logic: Vanilla JavaScript (ES6+, Canvas API)
- Icons: RemixIcon
- Font: Inter (Google Fonts)
No build steps or complex installation required. This project is built with standard web technologies.
- A modern web browser (Chrome, Firefox, Edge, Safari).
-
Clone the repository
git clone https://github.com/sham-jadhav03/Image-Editor.git cd Image-Editor -
Run the Application
- simply open
index.htmlin your web browser. - OR use a lightweight dev server for the best experience (e.g., Live Server in VS Code).
# using npx and serve npx serve .
- simply open
- Upload: Click "Choose Image" or drag a file into the center panel.
- Edit:
- Use the Features panel on the right to adjust individual parameters (Brightness, Blur, etc.).
- Click any Preset button to apply a pre-configured look.
- Animate & Record:
- Click Animate to see a live "Cyber Glitch" effect.
- Click Record to capture the animation. Hit "Stop Rec" to automatically download the video.
- Resize & Optimize:
- Enter desired Width or Height in the resize panel.
- Toggle Maintain Aspect Ratio to keep the image proportions.
- Use the Quality slider to compress the image and watch the Estimated Size update in real-time.
- Reset: Made a mistake? Click the "Reset" button to revert to the original image and dimensions.
- Download: Click the "Download" button to save your masterpiece. (Saves as
.jpgif quality is reduced, or.pngfor lossless).
| Filter | Description | Unit |
|---|---|---|
| Brightness | Adjusts the lightness of the image. | % |
| Contrast | Enhances or reduces the separation between dark and light areas. | % |
| Saturation | Controls the intensity of colors. | % |
| Hue Rotation | Shifts the colors around the color wheel. | deg |
| Blur | Applies a Gaussian blur effect. | px |
| Grayscale | Converts the image to black and white. | % |
| Sepia | Applies a warm, antique tone. | % |
| Opacity | Adjusts the transparency of the image. | % |
| Invert | Inverts the colors (creates a negative effect). | % |
| Resize | Change physical dimensions (Width/Height). | px |
| Quality | JPEG compression level for file size reduction. | % |
This version introduces powerful tools for optimizing your images for the web:
- Dimension Control: Adjust the width and height of your image. The aspect ratio is maintained by default to prevent stretching.
- File Size Optimization: Using the Quality slider, you can apply JPEG compression to significantly reduce the file size (KB).
- Live Estimation: The editor provides a real-time estimate of the final file size, helping you find the perfect balance between quality and performance.
- Smart Export:
- 100% Quality: Saved as
.png(lossless, high quality). - Lower Quality: Saved as
.jpg(compressed, small file size).
- 100% Quality: Saved as
Image-Editor/
│
├── index.html # Main HTML structure
├── style.css # Core layout and responsive styles
├── theme.css # Color variables and design tokens
├── script.js # App logic, canvas manipulation, and event listeners
└── README.md # Project documentation
Contributions are welcome! If you'd like to improve this project:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/YourFeature). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Sham Jadhav