html
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
<!DOCTYPE html>
<head>
<title>Image Edit</title>
</head>
<body>
<h1>CSS3 Image Filters</h1>
<img id="image" src="http://int.technion.ac.il/wp-content/uploads/2016/12/Study-Abroad-Programs-in-Israel.jpg" alt="Image" /><br />
<div id="imgdesc">This image is taken from <a href="https://int.technion.ac.il/" title="Home - Technion" target="_blank">The International site of The Technion - Israel Institute of Technology</a></div>
You can change the picture by supplying a url to your picture here.<br />It will be displayed in the same size as this one.<br />
<input type="text" id="imgurl" name="img" placeholder="Enter the URL of your picture hare" /> <button id="chngbtn" onmouseup="changeImage();">Change the Picture</button>
<p id="warn">WARNING: Images on the Internet may have copyrights!</p>
<form method="post" action="imageedit.html">
<table>
<tr>
<td class="rowtitle left" colspan="2">Grey Scale</td><td class="rowtitle right" colspan="2">Blur</td>
</tr>
<tr>
<td>0%<input onmousemove="chng();" onchange="chng();" type="range" id="bw" min="0" max="100" value="0" />100%</td><td class="Values left" id="bwval">0%</td>
<td class="right">0px<input onmousemove="chng();" onchange="chng();" type="range" id="blur" min="0" max="50" value="0" />50px</td><td class="Values right" id="blurval">0 Pixel</td>
</tr>
<tr>
<td class="rowtitle left" colspan="2">Brightness</td><td class="rowtitle right" colspan="2">Contrast</td>
</tr>
<tr>
<td>0%<input onmousemove="chng();" onchange="chng();" type="range" id="bright" min="0" max="200" value="100" />200%</td><td class="Values left" id="brightval">100%</td>
<td class="right">0%<input onmousemove="chng();" onchange="chng();" type="range" id="con" min="0" max="200" value="100" />200%</td><td class="Values right" id="conval">100%</td>
</tr>
<tr>
Enter to Rename, Shift+Enter to Preview
css
css
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
body
{
background-color: #787878;
color: #000099;
text-align:center;
}
h1
{
text-shadow: 2px 2px 2px #000033, 2px 2px 2px #000000;
}
img
{
width:600px;
height:400px;
filter: grayscale(0%) blur(0px) brightness(100%) contrast(100%) hue-rotate(0deg) invert(0%) saturate(100%) sepia(0%) opacity(100%);
}
form
{
font-family:"Courier New", Courier, sans-serif;
font-weight:bold;
text-align:center;
}
p, table
{
display:inline;
}
td
{
Enter to Rename, Shift+Enter to Preview
js
js
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
function chng()
{
var bw = document.getElementById("bw").value;
var bwval = document.getElementById("bwval");
var blur = document.getElementById("blur").value;
var blurval = document.getElementById("blurval");
var bright = document.getElementById("bright").value;
var brightval = document.getElementById("brightval");
var con = document.getElementById("con").value;
var conval = document.getElementById("conval");
var hue = document.getElementById("hue").value;
var hueval = document.getElementById("hueval");
var invert = document.getElementById("invert").value;
var invertval = document.getElementById("invertval");
var sat = document.getElementById("sat").value;
var satval = document.getElementById("satval");
var sepia = document.getElementById("sepia").value;
var sepiaval = document.getElementById("sepiaval");
var opa = document.getElementById("opa").value;
var opaval = document.getElementById("opaval");
document.getElementById("image").style.filter = 'grayscale(' + bw + '%) blur(' + blur + 'px) brightness(' + bright + '%) contrast(' + con + '%) hue-rotate(' + hue + 'deg) invert(' + invert + '%) saturate(' + sat + '%) sepia(' + sepia + '%) opacity(' + opa + '%)';
bwval.innerHTML = bw + "%";
blurval.innerHTML = blur + " Pixel";
brightval.innerHTML = bright + "%";
conval.innerHTML = con + "%";
hueval.innerHTML = hue + "<sup>o</sup>";
invertval.innerHTML = invert + "%";
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run