Implementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript-js-Tutorial-php.cn

Implementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript

WBOY

Freigeben： 2023-09-23 11:57:05

nach vorne

1019 Leute haben es durchsucht

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

Nach dem Login kopieren

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()">

Nach dem Login kopieren

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>

Nach dem Login kopieren