1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h1>green screen web page</h1>
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/simpleimage.js"> </script>
<canvas id="can1"></canvas>
<canvas id="can2"></canvas>
<p>
foreground: <input type="file" multiple="false" accept="image/*" id="fgfile" onchange="loadforegroundimage()">
</p>
<p>
background: <input type="file" multiple="false" accept="image/*" id="bgfile" onchange="loadbackgroundimage()">
</p>
<input type="button" id="button" value="create composite" onclick="dogreenscreen()">
<input type="button" id="button" value="clear canvas" onclick="clearcanvas()">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h1 {
font-size: 20pt;
font-family: arial;
color: #4b0082;
}
body {
background-color: #faebd7;
}
p {
font-size: 13pt;
}
canvas {
width: 380px;
background-color: #7b68ee;
border: 2px solid #a9a9a9;
}
input {
font-size: 12pt;
}
这是一个相当简单但说明性的页面设计：
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var fgimage = null;
var bgimage = null;
var can1 = null;
var can2 = null;
function loadForegroundImage(){
can1 = document.getElementById("can1");
var imgFile = document.getElementById("fgfile");
fgimage = new SimpleImage(imgFile);
fgimage.drawTo(can1);
}
function loadBackgroundImage(){
can2 = document.getElementById("can2");
var imgFile = document.getElementById("bgfile");
bgimage = new SimpleImage(imgFile);
bgimage.drawTo(can2);
}
function doGreenScreen(){
if (fgimage==null || !fgimage.complete()) {
alert("Foreground not loaded");
return;
}
if (bgimage==null || !bgimage.complete()) {
alert("Background not loaded");
return;
}
clearCanvas();
var output = new SimpleImage(fgimage.getWidth(), fgimage.getHeight());
for (var pixel of fgimage.values()) {
if (pixel.getGreen()> pixel.getRed() + pixel.getBlue()) {
var x = pixel.getX();
var y = pixel.getY();
var bgpixel = bgimage.getPixel(x, y);
output.setPixel(x, y, bgpixel);
}
else {
output.setPixel(pixel.getX(), pixel.getY(), pixel);
}
}
output.drawTo(can1);
}
function clearCanvas(){
can1 = document.getElementById("can1");
can2 = document.getElementById("can2");
var context1 = can1.getContext("2d");
var context2 = can2.getContext("2d");
context1.clearRect(0,0,can1.width,can1.height);
context2.clearRect(0,0,can2.width,can2.height);
}
以上就是尝试自定义屏幕的详细内容，更多请关注php中文网其它相关文章！