Photo Editor

A browser-based aesthetic photo editor built using HTML5 Canvas, JavaScript, and CSS.
This editor supports cinematic filters, frames, overlays, passport photo generation, live preview, and aesthetic Instagram-style effects.

---

🚀 Features

Image Effects

• Golden Hour
• Vintage Film
• Noir
• Lomo
• Cold Brew
• Dreamy Aesthetic

---

Layout Frames

• Border Frame
• Polaroid
• Glass Morphism
• Film Strip
• Museum Gallery
• Blur Background
• Border

---

Manual Crop System

• Interactive crop mode
• Custom aspect ratios
• Instagram post presets
• Passport crop mode

---

Passport Photo Generator

• Fixed passport ratio
• White background support
• Automatic PDF sheet generation
• Multi-photo grid export

---

Live Preview

Real-time preview while changing:

• filters
• overlays
• frames
• colors
• padding

---

Batch Processing

Process multiple images automatically and download them in chosen format.

Supported formats:

• PNG
• JPG
• WebP

---

Technologies Used

• HTML5
• CSS3
• Vanilla JavaScript
• HTML5 Canvas API
• Cropper.js
• jsPDF

---

📂 Project Structure

PHOTOEDITORTOOL/
│
├── index.html
├── style.css
├── script.js
│
└── README.md

---

Example Effects

• Instagram aesthetic edits
• vintage cinematic look
• soft morning glow

---

How To Run

Option 1 — Simple

Just open:

https://photoeditor.enggviz.online/

in your browser.

---

Option 2 — Recommended (VS Code Live Server)

1. Install Live Server extension
2. Open project folder
3. Right click index.html
4. Click:

Open with Live Server

---

Future Improvements

• GPU accelerated effects
• Layer system
• Drag-and-drop stickers
• AI background removal
• Face detection
• Animated overlays
• Video support
• Preset packs

---

📄 License

This project is for educational and creative use.

---

👨‍💻 Author

Built by ATANU ROOJ

Experimenting with:

• creative coding
• browser-based image processing
• canvas rendering systems