Image_Video_Preprocessing_WebApplication_using_OpenCV

A full-stack Image and Video Processing Web Application built using Flask and OpenCV. The system enables real-time image manipulation, computer vision operations, and video processing through an interactive browser-based interface.

---

Project Overview

This project implements a complete computer vision processing pipeline that:

• Performs image preprocessing and transformations
• Supports real-time face detection (image & video)
• Provides interactive drawing and annotation tools
• Enables ROI extraction and edge detection
• Processes video frames with OpenCV
• Follows secure file handling and modular backend design

The application demonstrates production-ready CV workflow from upload → processing → preview → download.

---

Objective

To design and deploy a scalable web-based computer vision system that:

• Accepts image and video uploads
• Performs multiple OpenCV operations dynamically
• Allows real-time parameter customization
• Displays processed results instantly
• Maintains clean backend architecture with logging

---

Core Features

1️⃣ Image Blending & Composition

• Equal blending using cv2.addWeighted()
• Adjustable weighted blending
• Automatic resizing before blending

2️⃣ Image Reshaping

• Custom width & height resizing using cv2.resize()
• Aspect ratio handling

3️⃣ Region of Interest (ROI)

• Coordinate-based ROI extraction
• Interactive canvas-based ROI selection
• Pixel-level slicing operations

4️⃣ Geometric Drawing Operations

• Line → cv2.line()
• Rectangle → cv2.rectangle()
• Circle → cv2.circle()
• Arrow → cv2.arrowedLine()
• Customizable color, thickness, and coordinates

5️⃣ Text & Date-Time Overlay

• Text addition using cv2.putText()
• Dynamic timestamp insertion
• Custom font size, color, and positioning

6️⃣ Face Detection (Image & Video)

• Haar Cascade Classifier
• detectMultiScale() implementation
• Real-time video face detection
• Bounding box customization

7️⃣ Edge Detection

• Canny Edge Detection → cv2.Canny()
• Sobel Operator
• Laplacian Operator
• Optional Gaussian Blur preprocessing

8️⃣ Video Processing Engine

• Frame-by-frame processing
• VideoWriter integration
• FPS maintenance
• Automatic resource cleanup

---

Technical Stack

Backend

• Python
• Flask
• OpenCV (cv2)
• NumPy
• Werkzeug

Frontend

• HTML5
• CSS3 (Responsive Design)
• JavaScript (ES6+)
• Canvas API
• OpenCV.js

---

Architecture Highlights

• REST-based endpoint design
• Modular image processor class structure
• Structured logging system
• Secure file upload handling
• 200MB upload limit protection
• Exception handling for robustness

---

Project Structure

Image_Video_Preprocessing_WebApplication_using_OpenCV/
│
├── app.py
├── image_processor.py
├── log_file.py
├── README.md
│
├── Face_detection/
│
├── static/
│
└── templates/
    └── index.html

---

Processing Workflow

Upload → Select Technique → Adjust Parameters → Process → Preview → Download

Supports single-step and sequential processing operations.

---

Performance & Optimization

• Efficient NumPy array handling
• Proper memory cleanup
• Frame-level video processing
• Structured logging for debugging
• Scalable architecture for multi-threading

---

Security Features

• Secure filename handling
• File type validation
• Upload size restriction
• Controlled directory access
• Error handling with user feedback

---

Run Locally

pip install -r requirements.txt
python app.py

Open in browser:

http://localhost:5000

---

Future Improvements

• Cloud deployment (AWS / Render / Heroku)
• Deep learning–based face detection
• Batch image processing
• GPU acceleration support

---

Author

Hema Malini Gangumalla Aspiring Data Scientist

📧 hemamalinig07@gmail.com

---

License

MIT License