The Filter Page
How do I make an the filter page?
What is a the filter page? How do you make a the filter page? This script and codes were developed by Lichi Chen on 18 October 2022, Tuesday.
The Filter Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Filter Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
<h1>The Web Page</h1>
<h3>The Filter</h3>
<p> <canvas id = "one"></canvas>
<p> Upload Picture: <input type = "file" multiple = "false" accept = "image/*" id = "finput" onchange = "upload()">
</p>
<p>Image Size: <input type = "Button" id = "sizes" value = "Image Size" onclick = "dosize()">
</p>
<p> The size is <label id = "size"></label>
</p>
<p> <input type = "button" value = "Gray" id = "fgray" onclick = "dogray()"> <input type = "button" value = "blue" id = "fblue" onclick = "doblue()"> <input type = "button" value = "colorful" id = "fcolor" onclick = "docolor()"> <input type = "button" value = "red" id = "fred" onclick = "dored()"> <input type = "button" value = "xy" id = "fxy" onclick = "doxy()"> <input type = "button" value = "Rainbow" id = "frainbow" onclick = "dorainbow()"> <input type = "button" value = "Blur" id = "fblur" onclick = "doblur()">
</p>
<p> <input type = "button" value = "revert" id = "frevert" onclick = "dorevert()">
</p> <script src="js/index.js"></script>
</body>
</html>
The Filter Page - Script Codes CSS Codes
h1 { color: darkblue;
}
body { background-color: pink; font-size: 16px;
}
canvas { width: 500px; margin: 20px; border: 5px solid lightgray;
}
The Filter Page - Script Codes JS Codes
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;
var c = document.getElementById("one");
var img = null;
var output;
function upload() { var fimg = document.getElementById("finput"); img = new SimpleImage(fimg); img.drawTo(c);
}
function dosize() { document.getElementById("size").innerHTML = img.getWidth() + " x " + img.getHeight();
}
function filtergray() { output = new SimpleImage(img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(), pixel.getY()); var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; outpixel.setRed(avg); outpixel.setGreen(avg); outpixel.setBlue(avg); output.setPixel(pixel.getX(),pixel.getY(),outpixel); }
}
function filterblue() { output = new SimpleImage (img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(),pixel.getY()); var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if (avg <128) { outpixel.setRed(0); outpixel.setGreen(0); outpixel.setBlue(avg*2); } else { outpixel.setRed(avg*2-255); outpixel.setGreen(avg*2-255); outpixel.setBlue(255); } output.setPixel(pixel.getX(), pixel.getY(),outpixel); } }
function filtermix() { output = new SimpleImage(img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(),pixel.getY()); var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if (pixel.getX() < img.getWidth()/2) { if (avg <128) { outpixel.setRed(avg*2); outpixel.setGreen(0); outpixel.setBlue(0); } if (avg >128) { outpixel.setRed(255); outpixel.setGreen(avg*2-255); outpixel.setBlue(avg*2-255); } } if (pixel.getX() > img.getWidth()/2) { if (avg <128) { outpixel.setRed(0); outpixel.setGreen(0); outpixel.setBlue(avg*2); } if (avg >128) { outpixel.setRed(avg*2-255); outpixel.setGreen(avg*2-255); outpixel.setBlue(255); } } output.setPixel(pixel.getX(),pixel.getY(),outpixel); }
}
function filterred() { output = new SimpleImage (img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(), pixel.getY()); var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3; if (avg<128) { outpixel.setRed (avg*2); outpixel.setGreen(0); outpixel.setBlue(0); } else { outpixel.setRed(255); outpixel.setGreen(avg*2-255); outpixel.setBlue(avg*2-255); } output.setPixel(pixel.getX(),pixel.getY(),outpixel); }
}
function filterxy() { output = new SimpleImage (img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(), pixel.getY()); var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3; if (pixel.getX()/pixel.getY() > img.getWidth()/img.getHeight()) { if (avg < 128) { outpixel.setRed(0); outpixel.setGreen(avg*2); outpixel.setBlue(0); } if (avg >128) { outpixel.setRed(avg*2-255); outpixel.setGreen(255); outpixel.setBlue(avg*2-255); } } if (pixel.getX()/pixel.getY() < img.getWidth()/img.getHeight()) { if (avg < 128) { outpixel.setRed(avg*2); outpixel.setGreen(0); outpixel.setBlue(avg*2); } if (avg >128) { outpixel.setRed(avg*2-255); outpixel.setGreen(255); outpixel.setBlue(avg*2-255); } } output.setPixel(pixel.getX(),pixel.getY(),outpixel); }
}
function filterrainbow() { output = new SimpleImage(img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var outpixel = output.getPixel(pixel.getX(),pixel.getY()); var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if (pixel.getX() < img.getWidth()/7) { if (avg < 128) { outpixel.setRed(avg*2); outpixel.setGreen(0); outpixel.setBlue(0); } if (avg > 128) { outpixel.setRed(255); outpixel.setGreen(avg*2-255); outpixel.setBlue(avg*2-255); } } if (pixel.getX() > img.getWidth()/7 && pixel.getX() < img.getWidth()/7*2) { if (avg < 128) { outpixel.setRed(avg*2); outpixel.setGreen(avg*0.8); outpixel.setBlue(0); } if (avg > 128) { outpixel.setRed(255); outpixel.setGreen(avg*1.2-51); outpixel.setBlue(avg*2-255); } } if (pixel.getX() > img.getWidth()/7*2 && pixel.getX() < img.getWidth()/7*3) { if (avg < 128) { outpixel.setRed(avg*2); outpixel.setGreen(avg*2); outpixel.setBlue(0); } if (avg > 128) { outpixel.setRed(255); outpixel.setGreen(255); outpixel.setBlue(avg*2-255); } } if (pixel.getX() > img.getWidth()/7*3 && pixel.getX() < img.getWidth()/7*4) { if (avg < 128) { outpixel.setRed(0); outpixel.setGreen(avg*2); outpixel.setBlue(0); } if (avg > 128) { outpixel.setRed(avg*2-255); outpixel.setGreen(255); outpixel.setBlue(avg*2-255); } } if (pixel.getX() > img.getWidth()/7*4 && pixel.getX() < img.getWidth()/7*5) { if (avg < 128) { outpixel.setRed(0); outpixel.setGreen(0); outpixel.setBlue(avg*2); } if (avg > 128) { outpixel.setRed(avg*2-255); outpixel.setGreen(avg*2-255); outpixel.setBlue(255); } } if (pixel.getX() > img.getWidth()/7*5 && pixel.getX() < img.getWidth()/7*6) { if (avg < 128) { outpixel.setRed(avg*0.8); outpixel.setGreen(0); outpixel.setBlue(avg*2); } if (avg > 128) { outpixel.setRed(avg*1.2-51); outpixel.setGreen(avg*2-255); outpixel.setBlue(255); } } if (pixel.getX() > img.getWidth()/7*6 && pixel.getX() < img.getWidth()) { if (avg < 128) { outpixel.setRed(avg*1.6); outpixel.setGreen(0); outpixel.setBlue(avg*1.6); } if (avg > 128) { outpixel.setRed(avg*0.4+153); outpixel.setGreen(avg*2-255); outpixel.setBlue(avg*0.4+153); } } output.setPixel(pixel.getX(), pixel.getY(), outpixel); } }
function filterblur() { output = new SimpleImage(img.getWidth(),img.getHeight()); for (var pixel of img.values()) { var x = pixel.getX(); var y = pixel.getY(); var r = Math.random(); var z = Math.floor(r * 11) if (x + z < img.getWidth() && y + z < img.getHeight()) { if (r <= 0.5) { var outpixel = img.getPixel(x, y); output.setPixel(x,y,outpixel); } else { var xx = x + z; var yy = y + z; var outpixel2 = img.getPixel(xx, yy); output.setPixel(x,y,outpixel2); } } }
}
function dogray() { if (imageIsLoaded(img)) { filtergray(); } output.drawTo(c);
}
function doblue() { if (imageIsLoaded(img)) { filterblue(); } output.drawTo(c);
}
function docolor() { if (imageIsLoaded(img)) { filtermix(); } output.drawTo(c);
}
function dored() { if (imageIsLoaded(img)) { filterred(); } output.drawTo(c);
}
function doxy() { if (imageIsLoaded(img)) { filterxy(); } output.drawTo(c);
}
function dorainbow() { if (imageIsLoaded(img)) { filterrainbow(); } output.drawTo(c);
}
function doblur() { if (imageIsLoaded(img)) { filterblur(); } output.drawTo(c);
}
function dorevert() { img.drawTo(c);
}
function imageIsLoaded() { if (img == null || !img.complete()) { alert("Image does not loaded"); return false; } else { return true; }
}
Developer | Lichi Chen |
Username | chenlichiclc |
Uploaded | October 18, 2022 |
Rating | 3 |
Size | 3,026 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
My Interests Page | 2,331 Kb |
Draft | 2,161 Kb |
Color chooser practice-1 | 1,730 Kb |
1 | 1,885 Kb |
3 | 1,905 Kb |
2 | 1,975 Kb |
The Filter Page-3 | 2,033 Kb |
Week 3 | 2,287 Kb |
Upload and Display | 2,022 Kb |
Color chooser practice-2 | 1,887 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Hexagons | Ashmind | 4,360 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!