<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
style
>
canvas {
background: lightgray;
border: 1px solid black;
width: 450px;
height: 300px;
margin: 30px;
}
</
style
>
</
head
>
<
body
>
<
h1
>Green Screen Algorithm</
h1
>
<
canvas
id
=
"pic1"
></
canvas
>
<
canvas
id
=
"pic2"
></
canvas
>
<
br
/>
<
p
>
Forward Image: <
input
type
=
"file"
id
=
"fgFile"
multiple
=
"false"
onChange
=
"frontimg()"
>
</
p
>
<
p
>
Background Image: <
input
type
=
"file"
id
=
"bgFile"
multiple
=
"false"
onChange
=
"backimg()"
>
</
p
>
<
input
type
=
"button"
value
=
"Merge Image"
onClick
=
"merge()"
>
<
script
type
=
"text/javascript"
>
var imgFG = null;
var imgBG = null;
// This function takes forward image as input
function frontimg() {
var fileInput = document.getElementById("fgFile");
var canvas = document.getElementById("pic1");
imgFG = new SimpleImage(fileInput);
imgFG.drawTo(canvas);
}
// This function takes background image as output
function backimg() {
var fileInput = document.getElementById("bgFile");
var canvas = document.getElementById("pic2");
imgBG = new SimpleImage(fileInput);
imgBG.drawTo(canvas);
}
// This function merges both the image and
// produces the resultant image as output
// Implementation of Green Screen Algorithm
function merge() {
clear();
var pic1 = document.getElementById("pic1");
var outputImage = new SimpleImage(
imgFG.width, imgFG.height);
for (var pixel of imgFG.values()) {
if (pixel.getGreen() > pixel.getRed()
+ pixel.getBlue()) {
var x = pixel.getX();
var y = pixel.getY();
var newPixel = imgBG.getPixel(x, y);
outputImage.setPixel(x, y, newPixel);
}
else {
outputImage.setPixel(pixel.getX(),
pixel.getY(), pixel);
}
}
outputImage.drawTo(pic1);
}
// This function clears the previous
// fetched input and output.
function clear() {
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var context = pic1.getContext("2d");
context.clearRect(0, 0, pic1.width, pic1.height);
context = pic2.getContext("2d");
context.clearRect(0, 0, pic2.width, pic2.height);
}
</
script
>>
</
body
>
</
html
>