-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
35 lines (35 loc) · 1.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript" src= "DLTP JS.js"></script>
<script type="text/javascript" src="Picture Filter.js"></script>
<link rel="stylesheet" type="text/css" href="Picture Filter.css">
<h1 style="text-align: center;font-family:Luminari,fantasy;font-weight:200;">Image Presets</h1>
</head>
</script>
<body>
<div id="dropdown">
<button>Filters</button>
<div id="content">
<input type="button" value="Grayscale" onclick="Gray()"><br>
<input type="button" value="Red Filter" onclick="Red()"><br>
<input type="button" value="Blur" onclick="disorder()"><br>
<input type="button" value="Rainbow" onclick="rainbow()"><br>
<input type="button" value="Invert" onclick="invert()"><br>
<input type="button" value="Sepia" onclick="sepia()"><br>
<input type="button" value="Horizontal Flip" onclick="hmirror()"><br>
<input type="button" value="Vertical Flip" onclick="vmirror()"><br>
<input type="button" value="Horizontal and Vertical Flip" onclick="absmirror()"><br>
</div>
</div>
<div id="canv">
<canvas id="white"> </canvas>
<p style="font-size: large; text-align: center; color:white; font-family:Comic Sans MS, Comic Sans, cursive">Image</p>
<input style="float:left;" type="file" id="in" multiple= "false" accept=image/* onchange="upload()">
<input style="float:right;" type="button" value="Reset" onclick="reset()">
</div>
</body>
<h4 style="float:right; color: rgb(167, 167, 167,0.25);font-family: Luminari,fantasy"> By Quasi Deus(Suryaa)</h4>
<h5 style="float:left; color: rgb(167, 167, 167,0.25);font-family: Luminari,fantasy">Only Javascript was used to implement the filters.CSS was not used for the same</h3>
</html>
<!--onclick only uploads the image.
onchange uploads and displays the image.-->