Skip to content

Commit b49e944

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #155 from Atif0604/main
Image-Filter-App
2 parents 0547e75 + 5beafbe commit b49e944

File tree

6 files changed

+347
-2
lines changed

6 files changed

+347
-2
lines changed

‎Image-Filter-App/Image-Filter-App.png

20.9 KB
Loading

‎Image-Filter-App/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h1>Image Filter App</h1>
2+
3+
<p>An Awesome Image Filter App written in HTML, CSS, JavaScript and CamanJS .</p>
4+
5+
### Use of the Project:
6+
7+
<p>A Image Filter App helps to apply filters to your image as well modify different image characteristics like brightness etc. </p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
<li>CamanJS</li>
15+
</ul>
16+
17+
#### Steps to Use:
18+
19+
---
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Upload The Image
30+
- Apply Filter to it
31+
- Download the Modifed Image by clicking On Download Button.
32+
- And Here you have Awesome Modified Image
33+
34+
<h3> ScreenShots </h3>
35+
<img width="960" alt="Image-Filter-App" src="https://user-images.githubusercontent.com/64218887/124916416-47955680-e010-11eb-85a4-bab19399bf82.png">
36+
37+
<br>
38+

‎Image-Filter-App/index.html

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Image Filter App</title>
8+
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
<body>
12+
<nav class="navbar navbar-dark bg-info mb-5">
13+
<div class="container">
14+
<a href="#" class="navbar-brand">Image Filter App</a>
15+
</div>
16+
</nav>
17+
<div class="container">
18+
<div class="row">
19+
<div class="col-md-8 m-auto">
20+
<div class="custom-file mb-3">
21+
<input type="file" class="custom-file-input" id="upload-file">
22+
<label for="upload-file" class="custom-file-label">Choose Image</label>
23+
</div>
24+
<canvas id="canvas"></canvas>
25+
26+
<h4 class="text-center my-3">
27+
Filters
28+
</h4>
29+
<div class="row text-center mx-0 my-4" id="row-1">
30+
<div class="col-md-3 col-sm-12 my-3">
31+
<div class="btn-group btn-group-sm">
32+
<button class="fliter-btn brightness-remove btn btn-info">-</button>
33+
<button class="btn btn-secondarty btn-disabled" disabled >Brightness</button>
34+
<button class="filter-btn brightness-add btn btn-info">+</button>
35+
</div>
36+
</div>
37+
38+
<div class="col-md-3 col-sm-6 my-3">
39+
<div class="btn-group btn-group-sm">
40+
<button class="fliter-btn contrast-remove btn btn-info">-</button>
41+
<button class="btn btn-secondarty btn-disabled" disabled >Contrast</button>
42+
<button class="filter-btn contrast-add btn btn-info">+</button>
43+
</div>
44+
</div>
45+
46+
<div class="col-md-3 col-sm-6 my-3">
47+
<div class="btn-group btn-group-sm">
48+
<button class="fliter-btn saturation-remove btn btn-info">-</button>
49+
<button class="btn btn-secondarty btn-disabled" disabled >Saturation</button>
50+
<button class="filter-btn saturation-add btn btn-info">+</button>
51+
</div>
52+
</div>
53+
54+
55+
<div class="col-md-3 col-sm-12 my-3">
56+
<div class="btn-group btn-group-sm">
57+
<button class="fliter-btn vibrance-remove btn btn-info">-</button>
58+
<button class="btn btn-secondarty btn-disabled" disabled >Vibrance</button>
59+
<button class="filter-btn vibrance-add btn btn-info">+</button>
60+
</div>
61+
</div>
62+
</div>
63+
<!-- Row Ends -->
64+
65+
<h4 class="text-center my-3">
66+
Effects
67+
</h4>
68+
<div class="row mb-3" id="row-2">
69+
<div class="col-md-3 my-2">
70+
<button class="filter-btn vintage-add btn btn-dark btn-block">Vintage</button>
71+
</div>
72+
73+
<div class="col-md-3 my-2">
74+
<button class="filter-btn lomo-add btn btn-dark btn-block">Lomo</button>
75+
</div>
76+
77+
<div class="col-md-3 my-2">
78+
<button class="filter-btn clarity-add btn btn-dark btn-block">Clarity</button>
79+
</div>
80+
81+
<div class="col-md-3 my-2">
82+
<button class="filter-btn sincity-add btn btn-dark btn-block">Sin city</button>
83+
</div>
84+
</div>
85+
<!-- Row Ends -->
86+
87+
<div class="row" id="row-3">
88+
<div class="col-md-3 my-2">
89+
<button class="filter-btn crossprocess-add btn btn-dark btn-block">
90+
Cross Process
91+
</button>
92+
</div>
93+
<div class="col-md-3 my-2">
94+
<button class="filter-btn pinhole-add btn btn-dark btn-block">
95+
Pinhole
96+
</button>
97+
</div>
98+
<div class="col-md-3 my-2">
99+
<button class="filter-btn nostalgia-add btn btn-dark btn-block">
100+
Nostalgia
101+
</button>
102+
</div>
103+
<div class="col-md-3 my-2">
104+
<button class="filter-btn hermajesty-add btn btn-dark btn-block">
105+
Majesty
106+
</button>
107+
</div>
108+
</div>
109+
<div class="row mt-5" id="row-4">
110+
<div class="col-md-6 my-3 ">
111+
<button id="download-btn" class="btn btn-primary btn-block">Download Image</button>
112+
</div>
113+
<div class="col-md-6 my-3">
114+
<button id="revert-btn" class="btn btn-danger btn-block">Remove Filters</button>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
<div class="footer">
121+
<h4 >Designed & Developed with &#10084;&#65039; by Atif</h4>
122+
</div>
123+
124+
125+
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js" integrity="sha512-JjFeUD2H//RHt+DjVf1BTuy1X5ZPtMl0svQ3RopX641DWoSilJ89LsFGq4Sw/6BSBfULqUW/CfnVopV5CfvRXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
126+
<script src="./script.js"></script>
127+
</body>
128+
</html>

‎Image-Filter-App/script.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
const canvas = document.getElementById("canvas");
2+
const ctx = canvas.getContext("2d");
3+
4+
let img = new Image();
5+
let fileName = "";
6+
7+
const downloadBtn = document.getElementById("download-btn");
8+
const uploadFile = document.getElementById("upload-file");
9+
const revertBtn = document.getElementById("revert-btn");
10+
11+
// Filter & Effect Handlers
12+
document.addEventListener("click", (e) => {
13+
if (e.target.classList.contains("filter-btn")) {
14+
if (e.target.classList.contains("brightness-add")) {
15+
Caman("#canvas", img, function () {
16+
this.brightness(5).render();
17+
});
18+
} else if (e.target.classList.contains("brightness-remove")) {
19+
Caman("#canvas", img, function () {
20+
this.brightness(-5).render();
21+
});
22+
} else if (e.target.classList.contains("contrast-add")) {
23+
Caman("#canvas", img, function () {
24+
this.contrast(5).render();
25+
});
26+
} else if (e.target.classList.contains("contrast-remove")) {
27+
Caman("#canvas", img, function () {
28+
this.contrast(-5).render();
29+
});
30+
} else if (e.target.classList.contains("saturation-add")) {
31+
Caman("#canvas", img, function () {
32+
this.saturation(5).render();
33+
});
34+
} else if (e.target.classList.contains("saturation-remove")) {
35+
Caman("#canvas", img, function () {
36+
this.saturation(-5).render();
37+
});
38+
} else if (e.target.classList.contains("vibrance-add")) {
39+
Caman("#canvas", img, function () {
40+
this.vibrance(5).render();
41+
});
42+
} else if (e.target.classList.contains("vibrance-remove")) {
43+
Caman("#canvas", img, function () {
44+
this.vibrance(-5).render();
45+
});
46+
} else if (e.target.classList.contains("vintage-add")) {
47+
Caman("#canvas", img, function () {
48+
this.vintage().render();
49+
});
50+
} else if (e.target.classList.contains("lomo-add")) {
51+
Caman("#canvas", img, function () {
52+
this.lomo().render();
53+
});
54+
} else if (e.target.classList.contains("clarity-add")) {
55+
Caman("#canvas", img, function () {
56+
this.clarity().render();
57+
});
58+
} else if (e.target.classList.contains("sincity-add")) {
59+
Caman("#canvas", img, function () {
60+
this.sinCity().render();
61+
});
62+
} else if (e.target.classList.contains("crossprocess-add")) {
63+
Caman("#canvas", img, function () {
64+
this.crossProcess().render();
65+
});
66+
} else if (e.target.classList.contains("pinhole-add")) {
67+
Caman("#canvas", img, function () {
68+
this.pinhole().render();
69+
});
70+
} else if (e.target.classList.contains("nostalgia-add")) {
71+
Caman("#canvas", img, function () {
72+
this.nostalgia().render();
73+
});
74+
} else if (e.target.classList.contains("hermajesty-add")) {
75+
Caman("#canvas", img, function () {
76+
this.herMajesty().render();
77+
});
78+
}
79+
}
80+
});
81+
82+
// Revert Filters
83+
revertBtn.addEventListener("click", (e) => {
84+
Caman("#canvas", img, function () {
85+
this.revert();
86+
});
87+
});
88+
89+
// Upload File
90+
uploadFile.addEventListener("change", () => {
91+
// Get File
92+
const file = document.getElementById("upload-file").files[0];
93+
// Init FileReader API
94+
const reader = new FileReader();
95+
96+
// Check for file
97+
if (file) {
98+
// Set file name
99+
fileName = file.name;
100+
// Read data as URL
101+
reader.readAsDataURL(file);
102+
}
103+
104+
// Add image to canvas
105+
reader.addEventListener(
106+
"load",
107+
() => {
108+
// Create image
109+
img = new Image();
110+
// Set image src
111+
img.src = reader.result;
112+
// On image load add to canvas
113+
img.onload = function () {
114+
canvas.width = img.width;
115+
canvas.height = img.height;
116+
ctx.drawImage(img, 0, 0, img.width, img.height);
117+
canvas.removeAttribute("data-caman-id");
118+
};
119+
},
120+
false
121+
);
122+
});
123+
124+
// Download Event
125+
downloadBtn.addEventListener("click", () => {
126+
// Get ext
127+
const fileExtension = fileName.slice(-4);
128+
129+
// Init new filename
130+
let newFilename;
131+
132+
// Check image type
133+
if (fileExtension === ".jpg" || fileExtension === ".png") {
134+
// new filename
135+
newFilename = fileName.substring(0, fileName.length - 4) + "-edited.jpg";
136+
}
137+
138+
// Call download
139+
download(canvas, newFilename);
140+
});
141+
142+
// Download
143+
function download(canvas, filename) {
144+
// Init event
145+
let e;
146+
// Create link
147+
const link = document.createElement("a");
148+
149+
// Set props
150+
link.download = filename;
151+
link.href = canvas.toDataURL("image/jpeg", 0.8);
152+
// New mouse event
153+
e = new MouseEvent("click");
154+
// Dispatch event
155+
link.dispatchEvent(e);
156+
}

‎Image-Filter-App/style.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#canvas{
2+
margin: auto;
3+
background: #ececec;
4+
width: 100%;
5+
}
6+
.navbar-brand{
7+
margin: 0 auto;
8+
}
9+
10+
11+
12+
.footer {
13+
margin: 15px 0 5px;
14+
padding: 0.1rem !important;
15+
border-color: inherit;
16+
border-style: solid;
17+
border-width: 0;
18+
background-color: #212529 !important;
19+
}
20+
.footer h4 {
21+
color: white;
22+
text-align: center;
23+
}

‎Index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,6 @@
4848
| [TO-DO List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/To-Do%20List) | Simple TO-DO List written in HTML, CSS, and JavaScript |
4949
| [Weather-App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weather-App) | Simple Weather app written in HTML, CSS, and JavaScript using the APIs for fetching weather and geolocation information |
5050
| [News Webapp](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/flask_news_project) | A web app for searching news made using flask |
51-
| Score Keeper |A web Page where user can keep a count of their scores and will tell which player won.|
52-
51+
| Score Keeper |A web Page where user can keep a count of their scores and will tell which player won.|
52+
| [Image Filter App]() |An Awesome Image Filter App written in HTML, CSS, JavaScript and CamanJS.|
5353

0 commit comments

Comments
 (0)