Week 3
How do I make an week 3?
What is a week 3? How do you make a week 3? This script and codes were developed by Lichi Chen on 18 October 2022, Tuesday.
Week 3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Week 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>
<canvas id = "one">
</canvas>
<canvas id = "two">
</canvas>
<p> Foreground: <input type = "file" multiple = "false" accept = "image/*" id = "fgfile" onchange = "uploadfg()">
</P>
<p> Background: <input type = "file" multiple = "false" accept = "image/*" id = "bgfile" onchange = "uploadbg()">
</P>
<p> <input type = "button" value = "Create Composite" onclick = "dogreen()">
</P>
<p> <input type = "button" value = "Clear Canvase" onclick = "doclear()">
</p> <script src="js/index.js"></script>
</body>
</html>
Week 3 - Script Codes CSS Codes
body { background-color: pink; font-family: Verdana; margin: 20px;
}
h1 { color: darkblue;
}
canvas { width: 500px; margin: 20px; border: 5px solid lightgray;
}
input { font-size: 12pt;
}
Week 3 - Script Codes JS Codes
var fgimg = null;
var bgimg = null;
var c1;
var c2;
function uploadfg() { c1 = document.getElementById("one"); var fginput = document.getElementById("fgfile"); fgimg = new SimpleImage(fginput); fgimg.drawTo(c1);
}
function uploadbg() { c2 = document.getElementById("two"); var bginput = document.getElementById("bgfile"); bgimg = new SimpleImage(bginput); bgimg.drawTo(c2);
}
function docomposite() { var output = new SimpleImage(fgimg.getWidth(),fgimg.getHeight()); for (var pixel of fgimg.values()) { var x = pixel.getX(); var y = pixel.getY(); if (pixel.getGreen() > pixel.getRed() + pixel.getBlue()) { var bgpixel = bgimg.getPixel(x,y); output.setPixel(x,y,bgpixel); } else { output.setPixel(x,y,pixel); } } return output;
}
function dogreen() { if (fgimg == null || !fgimg.complete()) { alert("Foreground image not loaded"); } if (bgimg == null || !bgimg.complete()) { alert("Background image not loaded"); } doclear(); var finalimg = docomposite(); finalimg.drawTo(c1);
}
function doclear() { zero(c1); zero(c2);
}
function zero(c) { var cxt = c.getContext("2d"); cxt.clearRect(0,0,c.width,c.height);
}
Developer | Lichi Chen |
Username | chenlichiclc |
Uploaded | October 18, 2022 |
Rating | 3 |
Size | 2,287 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 |
Upload and Display | 2,022 Kb |
Color chooser practice-2 | 1,887 Kb |
Draft | 2,161 Kb |
My Interests Page | 2,331 Kb |
Color chooser practice-1 | 1,730 Kb |
The Filter Page-3 | 2,033 Kb |
3 | 1,905 Kb |
The Filter Page | 3,026 Kb |
2 | 1,975 Kb |
1 | 1,885 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 Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Flip test | Madhes | 1,635 Kb |
3D-box | Parthviroja | 2,346 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Web SQL | Hoehoe | 1,983 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
Bubble animation | Ftabor | 6,565 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!