Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Implement Green Screen Algorithm using JavaScript
The green background image is changed and replaced with any effect or other image using the green screen algorithm, also referred to as the chromakey algorithm. In short, what we're doing is swapping out all of the green pixels in the forward image with their matching counterparts in the background image.
Additionally, we need to keep in mind that the size of the output image should match that of the forward image. In the following step, the pixels from the forward image are duplicated into the new image. Rather than copying green pixels, the backdrop image's matching pixels are used.
Don't miss to include the following source file into your HTML code before applying the following code −
<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>
The JavaScript code needed to implement this algorithm is provided below. To use it, you must create the HTML code yourself.
HTML Source Code
You have to add this HTML code in the element in your HTML document.
<h1>Green Screen Algorithm Implementation using JavaScript with TutorialsPoint </h1> <canvas id="image1"></canvas> <canvas id="image2"></canvas> <br /> <p> First Image: <input type="file" id="myImageFile" multiple="false" onChange="frontimg()"> </p> <p> Background Image: <input type="file" id="bgImageFile" multiple="false" onChange="backimg()"> </p> <input type="button" value="Merge Image" onClick="merge()">
CSS Source Code
Next, CSS code in the HTML document
<style>
canvas {
background: rgb(214, 235, 176);
border: 1px solid rgb(13, 109, 160);
width: 420px;
height: 290px;
margin: 30px;
}
h1{
color: rgb(13, 109, 160);
}
body {
background-color: #bbb6ab;
}
</style>
JavaScript Source Code
You have to add below JavaScript code in the <script> tag in the HTML document
<script type="text/javascript">
let forwdImage = null;
let secImage = null;
// This function accepts an input of a forward picture
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// Background picture is output from this function
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// This function combines the two images and outputs the
// merged image as the final result. The Green Screen
// Algorithm is implemented
function merge() {
clear();
let image1 = document.getElementById("image1");
let outputImage = new SimpleImage(
forwdImage.width, forwdImage.height);
for (let pixel of forwdImage.values()) {
if (pixel.getGreen() > pixel.getRed() +
pixel.getBlue()) {
let x = pixel.getX();
let y = pixel.getY();
let newPixel = secImage.getPixel(x, y);
outputImage.setPixel(x, y, newPixel);
} else {
outputImage.setPixel(pixel.getX(),
pixel.getY(), pixel);
}
}
outputImage.drawTo(image1);
}
// The output and input from earlier
// fetches are cleared by this function.
function clear() {
let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");
let context = image1.getContext("2d");
context.clearRect(0, 0, image1.width, image1.height);
context = image2.getContext("2d");
context.clearRect(0, 0, image2.width, image2.height);
}
</script>
Example
Let's examine the complete code and output in the following code now.
<!DOCTYPE html>
<html>
<title>Implement Green Screen Algorithm using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
<style>
canvas {
background: rgb(214, 235, 176);
border: 1px solid rgb(13, 109, 160);
width: 420px;
height: 290px;
margin: 30px;
}
h1 {
color: rgb(13, 109, 160);
}
body {
background-color: #bbb6ab;
}
</style>
</head>
<body>
<h1>Green Screen Algorithm Implementation using JavaScript with TutorialsPoint </h1>
<canvas id="image1"></canvas>
<canvas id="image2"></canvas>
<br />
<p>
First Image: <input type="file" id="myImageFile" multiple="false" onChange="frontimg()">
</p>
<p>
Background Image: <input type="file" id="bgImageFile" multiple="false" onChange="backimg()">
</p>
<input type="button" value="Merge Image" onClick="merge()">
<script type="text/javascript">
let forwdImage = null;
let secImage = null;
// This function accepts an input of a forward picture
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// Background picture is output from this function
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// This function combines the two images and outputs the
// merged image as the final result. The Green Screen
// Algorithm is implemented
function merge() {
clear();
let image1 = document.getElementById("image1");
let outputImage = new SimpleImage(
forwdImage.width, forwdImage.height);
for (let pixel of forwdImage.values()) {
if (pixel.getGreen() > pixel.getRed() +
pixel.getBlue()) {
let x = pixel.getX();
let y = pixel.getY();
let newPixel = secImage.getPixel(x, y);
outputImage.setPixel(x, y, newPixel);
} else {
outputImage.setPixel(pixel.getX(),
pixel.getY(), pixel);
}
}
outputImage.drawTo(image1);
}
// The output and input from earlier
// fetches are cleared by this function.
function clear() {
let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");
let context = image1.getContext("2d");
context.clearRect(0, 0, image1.width, image1.height);
context = image2.getContext("2d");
context.clearRect(0, 0, image2.width, image2.height);
}
</script>
</body>
</html>
You will see this output screen without adding any image.
Next, you will see this output screen after adding both “First Image” and “Background Image” image.
Now you will the final output after clicking on “Merge Images” button. Both the images are combined as shown below.
Two pictures serve as the input for this algorithm. The first is a first image with a background of green, as well as the second is a background image that should be used in place of the green background.
The JavaScript combines both images after receiving both as input; consequently, the backward image takes the place of the forward image's green background. In order to implement the Green Screen Algorithm, the code was provided above.
643 Views
