The Filter Page-3
How do I make an the filter page-3?
What is a the filter page-3? How do you make a the filter page-3? This script and codes were developed by Lichi Chen on 17 October 2022, Monday.
The Filter Page-3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Filter Page-3</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> <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()">
</p>
<p> <input type = "button" value = "revert" id = "frevert" onclick = "dorevert()">
</p> <script src="js/index.js"></script>
</body>
</html>
The Filter Page-3 - Script Codes CSS Codes
h1 { color: darkblue;
}
body { background-color: pink; font-size: 16px;
}
canvas { width: 500px; margin: 20px; border: 5px solid lightgray;
}
finput { blur();
}
The Filter Page-3 - Script Codes JS Codes
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;
function dorevert() { var fimg = document.getElementById("finput"); img = new SimpleImage(fimg); 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 17, 2022 |
Rating | 3 |
Size | 2,033 Kb |
Views | 16,192 |
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 |
The Filter Page | 3,026 Kb |
My Interests Page | 2,331 Kb |
1 | 1,885 Kb |
Upload and Display | 2,022 Kb |
3 | 1,905 Kb |
Color chooser practice-1 | 1,730 Kb |
Draft | 2,161 Kb |
Week 3 | 2,287 Kb |
Color chooser practice-2 | 1,887 Kb |
2 | 1,975 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 |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Resume | Rottingroom | 5,483 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
About Mazano | Kiti | 2,585 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 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!