使用 JavaScript 实现绿屏算法
javascriptweb developmentfront end technology
使用绿屏算法(也称为色度键算法)更改绿色背景图像并将其替换为任何效果或其他图像。简而言之，我们所做的就是将前向图像中的所有绿色像素与背景图像中的匹配像素交换出去。
此外，我们需要记住，输出图像的大小应与前向图像的大小相匹配。在接下来的步骤中，前向图像中的像素将被复制到新图像中。不是复制绿色像素，而是使用背景图像的匹配像素。
在应用以下代码之前，不要忘记将以下源文件包含在 HTML 代码中 -
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
下面提供了实现此算法所需的 JavaScript 代码。要使用它，您必须自己创建 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()">
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>
JavaScript 源代码
您必须在 HTML 文档中的 <script> 标签中添加以下 JavaScript 代码
<script type="text/javascript">
let forwdImage = null;
let secImage = null;
// 该函数接受前向图片的输入
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// 该函数输出背景图片
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// 该函数将两幅图像合并，并输出合并后的图像作为最终结果。绿屏算法已实现
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);
}
// 此函数会清除先前获取的输出和输入。
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>
示例
现在让我们检查以下代码中的完整代码和输出。
<!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;
// 该函数接受前向图片的输入
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// 该函数输出背景图片
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// 该函数将两幅图像合并，并输出合并后的图像作为最终结果。绿屏算法已实现
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);
}
// 之前的输出和输入
// 该函数会清除获取的数据。
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>
您将看到此输出屏幕，无需添加任何图像。
接下来，在添加"第一幅图像"和"背景图像"图像后，您将看到此输出屏幕。
现在，单击"合并图像"按钮后，您将看到最终输出。两幅图像组合如下图所示。
两张图片作为此算法的输入。第一幅是背景为绿色的第一幅图像，第二幅是应该用来代替绿色背景的背景图像。
JavaScript 在收到两幅图像作为输入后将两幅图像组合在一起；因此，后向图像取代了前向图像的绿色背景。为了实现绿屏算法，上面提供了代码。
