Implementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript

Das grüne Hintergrundbild wurde geändert und durch einen beliebigen Effekt oder ein anderes Bild mit grüner Farbe ersetzt Bildschirmalgorithmus, auch Chroma-Key-Algorithmus genannt. Kurz gesagt, was wir tun, ist Tauschen Sie alle grünen Pixel im Vorwärtsbild mit ihren passenden Gegenstücken im Rückwärtsbild aus Hintergrundbild.

Außerdem müssen wir bedenken, dass die Größe des Ausgabebildes mit der Größe des Ausgabebildes übereinstimmen sollte Vorwärtsbild. Kopieren Sie im nächsten Schritt die Pixel aus dem Vorwärtsbild in das neue Bild Bild. Verwenden Sie passende Pixel aus dem Hintergrundbild, anstatt grüne Pixel zu kopieren.

Versäumen Sie nicht, die folgenden Quelldateien in Ihren HTML-Code einzubinden, bevor Sie Folgendes anwenden Code -

<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>

Der zur Implementierung dieses Algorithmus erforderliche JavaScript-Code wird unten bereitgestellt. Um es zu verwenden, müssen Sie es erstellen Schreiben Sie Ihren eigenen HTML-Code.

HTML-Quellcode

Sie müssen diesen HTML-Code zum Element Ihres HTML-Dokuments hinzufügen.

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

Als nächstes der CSS-Code im HTML-Dokument

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

Sie müssen den folgenden JavaScript-Code in das