使用 JavaScript 实现绿屏算法-js教程-PHP中文网

使用 JavaScript 实现绿屏算法

WBOY

发布： 2023-09-23 11:57:05

转载

1020 人浏览过

使用 JavaScript 实现绿屏算法

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

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

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

登录后复制