<!Docytpe html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prototype</title>
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>
</head>
<body>
<h1> Image Filter </h1>
<canvas id="canvas1" ></canvas>
<h2> Upload Image </h2>
<p>
<input type="file" id="filename" multiple="false" accept="image/*" onchange="fileload()"/>
</p>
<h3> choose filter </h3>
<input text="button" id="gray" value="Gray" onclick="makeGray()"/>
<input type="button" id="red" value="Red" onclick="makeRed()"/>
<input type="button" id="blur" value="Blur" onclick="makeBlur()"/>
<input type="button" id="rainbow" value="Rainbow" onclick="makeRainbow()"/>
<input type="button" id="reset" value="Reset" onclick="resetImage()"/>
</body>
</html>
body {
background-color : wheat;
margin : 10px;
font-size : 15pt;
}
h1 {
color : Red;
}
h2 {
color : red;
}
canvas {
margin : 10px;
border : 2px solid gray;
height : 200px;
padding : 10px;
}
p {
margin : 10px;
}
input {
margin : 10px;
font-size : 14pt;
}
var image = null;
var grayImage = null;
var rainbowImage = null;
var redImage = null;
var blurImage = null;
var canvas = null;
function fileload() {
var regimage = document.getElementById("filename");
image = new SimpleImage(regimage);
grayImage = new SimpleImage(regimage);
rainbowImage = new SimpleImage(regimage);
redImage = new SimpleImage(regimage);
blurImage = new SimpleImage(regimage);
canvas = document.getElementById("canvas1");
image.drawTo(canvas);
}
function imageIsLoaded(sampleimage) {
if (sampleimage != null && sampleimage.complete()) {
return true;
}
else {
alert("Image is not Loaded");
return false;
}
}
function makeGray() {
if (imageIsLoaded(grayImage) ) {
for (var graypixel of grayImage.values()) {
var avg = (graypixel.getRed() + graypixel.getBlue() + graypixel.getGreen()) / 3;
graypixel.setRed(avg);
graypixel.setGreen(avg);
graypixel.setBlue(avg);
}
grayImage.drawTo(canvas);
}
}
function makeRed() {
if (imageIsLoaded(redImage)) {
for (var pixel of redImage.values()) {
var avg = (pixel.getRed() + pixel.getBlue() + pixel.getGreen()) / 3;
if (avg < 128) {
pixel.setRed(2 * avg);
pixel.setBlue(0);
pixel.setGreen(0);
}
else {
pixel.setRed(255);
pixel.setGreen((2*avg)-255);
pixel.setBlue((2*avg)-255);
}
}
}
redImage.drawTo(canvas);
}
function makeRainbow() {
if (imageIsLoaded(rainbowImage)) {
var h = pinkandpurpleImage.getHeight();
for (var pixel of rainbowImage.values()) {
var avg = (pixel.getRed() + pixel.getBlue() + pixel.getGreen()) / 3;
if (pixel.getY() < h / 7) {
if (avg < 128) {
pixel.setRed(2 * avg);
pixel.setGreen(0);
pixel.setBlue(0);
}
if (avg >= 128) {
pixel.setRed(255);
pixel.setGreen((2*avg)-255);
pixel.setBlue((2*avg)-255);
}
}
if (pixel.getY() < 2 * h / 7) {
if (pixel.getY() > h/7) {
if (avg < 128) {
pixel.setRed(2*avg);
pixel.setGreen(0.8*avg);
pixel.setBlue(0);
}
if (avg >= 128) {
pixel.setRed(255);
pixel.setGreen((1.2*avg)-51);
pixel.setBlue((2*avg)-255);
}
}
}
if (pixel.getY() < 3 * h / 7) {
if (pixel.getY() > 2* h / 7 ) {
if (avg < 128) {
pixel.setRed(2*avg);
pixel.setGreen(2*avg);
pixel.setBlue(0);
}
if (avg >= 128) {
pixel.setRed(255);
pixel.setGreen(255);
pixel.setBlue((2*avg)-255);
}
}
}
if (pixel.getY() < 4 * h / 7) {
if (pixel.getY() > 3* h / 7) {
if (avg < 128) {
pixel.setRed(0);
pixel.setGreen(2*avg);
pixel.setBlue(0);
}
if (avg >= 128) {
pixel.setRed((2*avg)-255);
pixel.setGreen(255);
pixel.setBlue((2*avg)-255);
}
}
}
if (pixel.getY() < 5 * h / 7) {
if (pixel.getY() > 4 * h / 7 ) {
if (avg < 128) {
pixel.setRed(0);
pixel.setGreen(0);
pixel.setBlue(2*avg);
}
if (avg >= 128) {
pixel.setRed((2*avg)-255);
pixel.setGreen((2*avg)-255);
pixel.setBlue(255);
}
}
}
if (pixel.getY() < 6 * h / 7) {
if (pixel.getY() > 5 * h / 7) {
if (avg < 128) {
pixel.setRed(0.8*avg);
pixel.setGreen(0);
pixel.setBlue(2*avg);
}
if (avg >= 128) {
pixel.setRed((1.2*avg)-51);
pixel.setGreen((2*avg)-255);
pixel.setBlue(255);
}
}
}
if (pixel.getY() >= 6 * h / 7) {
if (avg < 128) {
pixel.setRed(1.6*avg);
pixel.setGreen(0);
pixel.setBlue(1.6*avg);
}
if (avg >= 128) {
pixel.setRed((0.4*avg)+153);
pixel.setGreen((2*avg)-255);
pixel.setBlue((0.4*avg)+153);
}
}
}
rainbowImage.drawTo(canvas);
}
}
function makeBlur() {
if (imageIsLoaded(blurImage)) {
var w = blurImage.getWidth();
var h = blurImage.getHeight();
var tempImage = new SimpleImage(w, h);
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
var rnd = Math.random();
var pixel = blurImage.getPixel(x, y);
var x0 = pixel.getX();
var y0 = pixel.getY();
if (rnd < 0.5) {
var newx = x0 + Math.round(Math.random() * 10);
var newy = y0 + Math.round(Math.random() * 10);
newx = Math.max(0, Math.min(newx, w-1));
newy = Math.max(0, Math.min(newy, h-1))
var newPixel = blurImage.getPixel(newx, newy);
if (newPixel) {
tempImage.setPixel(x0, y0, newPixel);
}
else {
tempImage.setPixel(x0, y0, pixel);
}
}
else {
tempImage.setPixel(x0, y0, pixel);
}
}
}
tempImage.drawTo(canvas);
}
}
function resetImage() {
if (imageIsLoaded(image)) {
grayImage = new SimpleImage(image);
rainbowImage = new SimpleImage(image);
redImage = new SimpleImage(image);
pinkandpurpleImage = new SimpleImage(image);
zebrastripeImage = new SimpleImage(image);
blurImage = new SimpleImage(image);
image = new SimpleImage(image);
image.drawTo(canvas);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.