El algoritmo de pantalla verde (también conocido como algoritmo chromakey) se usa para cambiar la imagen de fondo que es de color verde y reemplazarla con cualquier efecto u otra imagen. Básicamente, lo que estamos haciendo es reemplazar todos los píxeles verdes en la imagen delantera con los píxeles correspondientes de la imagen de fondo. Además, debemos recordar el tamaño de la imagen de salida, que debe ser el mismo que el de la imagen anterior. Luego, los píxeles de la imagen anterior se copian en la nueva imagen. Los píxeles correspondientes de la imagen de fondo se copian en lugar de los píxeles verdes.
Antes de implementar el siguiente código, no olvide mencionar el siguiente archivo fuente en su código HTML:
<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>
A continuación se muestra el código JavaScript para implementar este algoritmo. Tienes que escribir el código HTML tú mismo para implementarlo:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</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>
Producción:
Estos algoritmos toman dos imágenes como entrada. Una es la imagen de avance que contiene color verde en el fondo y la otra es la imagen de fondo que se reemplazará en lugar del fondo verde.
Después de tomar ambas imágenes como entrada, el siguiente código fusiona ambas imágenes y, por lo tanto, las imágenes anteriores reemplazan el fondo verde de la imagen anterior. Entonces, arriba estaba el código para implementar el algoritmo de pantalla verde.