綠色背景圖像已更改并替換為使用綠色的任何效果或其他圖像
屏幕算法，也稱為色鍵算法。簡(jiǎn)而言之，我們正在做的是
將前向圖像中的所有綠色像素與其在后向圖像中的匹配對(duì)應(yīng)部分交換
背景圖片。
此外，我們需要記住，輸出圖像的大小應(yīng)與輸出圖像的大小相匹配
向前圖像。在接下來的步驟中，將前向圖像中的像素復(fù)制到新圖像中
圖像。使用背景圖像的匹配像素，而不是復(fù)制綠色像素。
在應(yīng)用以下內(nèi)容之前，請(qǐng)不要錯(cuò)過將以下源文件包含到您的 HTML 代碼中
代碼 –
<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>
登錄后復(fù)制
下面提供了實(shí)現(xiàn)該算法所需的 JavaScript 代碼。要使用它，您必須創(chuàng)建
自己編寫 HTML 代碼。
HTML 源代碼
您必須將此 HTML 代碼添加到 HTML 文檔的元素中。
<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()">
登錄后復(fù)制
CSS源代碼
接下來，HTML文檔中的CSS代碼
<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>
登錄后復(fù)制
JavaScript 源代碼
您必須在 HTML 文檔的 標(biāo)記中添加以下 JavaScript 代碼
<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>
登錄后復(fù)制
示例
現(xiàn)在讓我們檢查以下代碼中的完整代碼和輸出。
<!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>
登錄后復(fù)制
您將看到此輸出屏幕，而無需添加任何圖像。
接下來，添加“第一圖像”和“背景圖像”圖像后，您將看到此輸出屏幕。
現(xiàn)在您將看到單擊“合并圖像”按鈕后的最終輸出。兩張圖片都是
組合如下圖所示。
兩張圖片作為該算法的輸入。第一個(gè)是背景為的第一張圖像
綠色，第二個(gè)是應(yīng)該用來代替綠色的背景圖像
背景。
JavaScript 在接收到兩個(gè)圖像作為輸入后將這兩個(gè)圖像組合起來；因此，落后的
圖像取代前向圖像的綠色背景。為了貫徹落實(shí)綠色
篩選算法，上面提供了代碼。
以上就是使用 JavaScript 實(shí)現(xiàn)綠屏算法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
