PHOTO FILTER EFFECT USING HTML, CSS AND JAVA
SCRIPT
Presented By
Rahul Sharma , Priyanshu Sharma
(BCA 2nd Year, Enrolment No. : 1001111)
Under the Supervision of
Prof. Renu Jangra
(Assistant Professor, Dept. of Computer Application, UEMJ)
Submitted to
DEPARTMENT OF COMPUTER APPLICATION
UNIVERSITY OF ENGINEERING &
MANAGEMENT, JAIPUR
CONTENTS
Introduction
Overview Of The Project
Setting Up The Project
Functionality
Result analysis
Reference
2
INTRODUCTION
Briefly introduce the topic
Hello everyone, today We'll be presenting a photo filter
project that involves creating software or tools that can
modify or enhance digital photos. These filters are like
special effects or adjustments applied to images to change
their appearance, such as adding color effects, adjusting
brightness, and contrast, or applying artistic styles like
vintage or black-and-white looks. The project might focus
on developing various filters and designing an app, or
software that allows users to easily apply these effects to
their photos, making them look more appealing or creative.
Let's get started!
3
EXPLAIN WHAT IS PHOTO FILTER EFFECT:
A photo filter effect refers to an alteration or enhancement
applied to a photograph to change its appearance or style.
These effects can be applied using software, apps, or editing
tools and serve various purposes
4
OVERVIEW OF THE PROJECT
Provide a brief overview of the project:
Photo filter effects are digital modifications applied to images to alter their
appearance or style. These effects can be implemented using software, apps,
or editing tools and serve various purposes, including:
Color Adjustments: Filters can change the color tones, saturation, and hue of
a photo, creating vibrant, muted, or stylized color palettes.
Contrast and Brightness: Modifying contrast and brightness levels can
enhance or soften
the image, affecting its clarity and visual impact.
Artistic Transformations: Filters can simulate traditional art styles like oil
paintings, watercolors, or sketches, transforming photos into artistic
renditions.
Textures and Grains: Adding textures or grains can impart a vintage or film-
like quality to
the image, lending it a distinct visual feel.
5
Special Effects: Various effects such as blurs, vignettes, or distortions can be
applied to specific areas or the entire image, creating unique visual elements.
SETTING UP THE PROJECT
Create the HTML Structure:
• Create an HTML file (index.html) with the necessary structure to display a and control elements.
6
Create the CSS File (styles.css):
• Style the HTML elements to provide a visually appealing layout.
7
Implement JavaScript Functionality (script.js):
• Add JavaScript functionality to handle user interactions and apply
filters to the image.
8
FUNCTIONALITY
Image Upload:
• Implemented an input element to allow users to upload images.
9
Basic Filters:-
• Grayscale Filter
• Sepia Filter
• (Add more filters implemented)
Functionality Details :-
• Used JavaScript event listeners to capture user interactions.
• Applied CSS filter properties to the image element for filter effects
Code Explanation:-
• HTML Structure: Defined the layout including image container, buttons, and input for
image upload.
• CSS Styling: Styled HTML elements for a visually appealing interface.
• JavaScript Functionality: Controlled image manipulation and filter application using
JavaScript.
Future Enhancements:-
• Implement additional filters like blur, contrast adjustment, etc. 10
• Explore canvas-based image manipulation for more complex filters.
RESULTS ANALYSIS
The success of the photo filter project can be evaluated based on the
following criteria:
• Usability Testing: Conduct user testing sessions to assess the application's
ease of use, intuitiveness, and user satisfaction.
• Feature Completeness: Verify that the application implements all the
planned features, including filter selection, real-time manipulation, image
upload and saving, and cross-browser compatibility.
• Performance Optimization: Measure the application's performance in
terms of loading speed, image processing speed, and overall
responsiveness.
11
• Visual Appeal: Assess the application's aesthetic design, ensuring an
attractive and engaging user experience.
CONCLUSION
Our Photo Filter Effect project achieved notable success by
implementing a variety of filters like brightness, contrast,
grayscale, blur, sepia, and hue-rotate. The user-friendly
interface allows real-time interaction, making image
modification engaging.
We overcame challenges in implementing complex filters,
laying the groundwork for future exploration into advanced
image manipulation. While acknowledging the need for UI
enhancements, the project's success motivates us to
diversify filters and explore advanced techniques. The
journey doesn't end here – our focus is on usability
improvements and continued innovation. 12
REFERENCES
1. W3Schools - HTML Tutorial:
URL: https://www.w3schools.com/html/
2. MDN Web Docs - CSS:
URL: https://developer.mozilla.org/en-US/docs/Web/CSS
3. JavaScript Documentation:
URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript
4. University of Engineering & Management, Jaipur:
For academic guidance and support. 13
THANK YOU
Contact Details:
Email:
[email protected] 14
