使用 JavaScript 實作綠屏演算法-js教程-PHP中文網

使用 JavaScript 實作綠屏演算法

WBOY

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

轉載

1021 人瀏覽過

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

登入後複製