Heim > Artikel > Web-Frontend > Implementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript

Implementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript

WBOYnach vorne: 2023-09-23 11:57:05972Durchsuche

使用 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 <script>-Tag Ihres HTML-Dokuments einfügen</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>

Beispiel

Lassen Sie uns nun den vollständigen Code überprüfen und im folgenden Code ausgeben.

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

Sie sehen diesen Ausgabebildschirm, ohne Bilder hinzuzufügen.

Als nächstes sehen Sie nach dem Hinzufügen der Bilder „Erstes Bild“ und „Hintergrundbild“ diesen Ausgabebildschirm.

Jetzt sehen Sie die endgültige Ausgabe, nachdem Sie auf die Schaltfläche „Bilder zusammenführen“ geklickt haben. Beide Bilder sind Die Kombination ist unten dargestellt.

Zwei Bilder dienen als Eingabe für den Algorithmus. Das erste ist das erste Bild mit dem Hintergrund Grün, das zweite ist das Hintergrundbild, das anstelle von Grün verwendet werden sollte Hintergrund.

JavaScript kombiniert zwei Bilder, nachdem sie als Eingabe empfangen wurden; daher die Verzögerung Das Bild ersetzt den grünen Hintergrund des Vorwärtsbildes. Um das Grün umzusetzen Screening-Algorithmus, Code wird oben bereitgestellt.

Das obige ist der detaillierte Inhalt vonImplementieren Sie Greenscreen-Algorithmen mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?Nächster Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?

In Verbindung stehende Artikel

Mehr sehen