首页 > 文章 > web前端 > 使用 JavaScript 实现绿屏算法

使用 JavaScript 实现绿屏算法

WBOY转载: 2023-09-23 11:57:05933浏览

绿色背景图像已更改并替换为使用绿色的任何效果或其他图像屏幕算法，也称为色键算法。简而言之，我们正在做的是将前向图像中的所有绿色像素与其在后向图像中的匹配对应部分交换背景图片。

此外，我们需要记住，输出图像的大小应与输出图像的大小相匹配向前图像。在接下来的步骤中，将前向图像中的像素复制到新图像中图像。使用背景图像的匹配像素，而不是复制绿色像素。

在应用以下内容之前，请不要错过将以下源文件包含到您的 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>

<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>

示例

现在让我们检查以下代码中的完整代码和输出。

<!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>

您将看到此输出屏幕，而无需添加任何图像。

接下来，添加“第一图像”和“背景图像”图像后，您将看到此输出屏幕。

现在您将看到单击“合并图像”按钮后的最终输出。两张图片都是组合如下图所示。

两张图片作为该算法的输入。第一个是背景为的第一张图像绿色，第二个是应该用来代替绿色的背景图像背景。

JavaScript 在接收到两个图像作为输入后将这两个图像组合起来；因此，落后的图像取代前向图像的绿色背景。为了贯彻落实绿色筛选算法，上面提供了代码。

以上是使用 JavaScript 实现绿屏算法的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html 算法

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用 FabricJS 创建带有背景图像的画布？下一篇：JavaScript 程序查找是否存在总和为 0 的子数组

查看更多