Maison > Article > interface Web > Implémenter des algorithmes d'écran vert à l'aide de JavaScript

Implémenter des algorithmes d'écran vert à l'aide de JavaScript

WBOYavant: 2023-09-23 11:57:05976parcourir

使用 JavaScript 实现绿屏算法

L'image d'arrière-plan verte a été modifiée et remplacée par n'importe quel effet ou autre image utilisant la couleur verte Algorithme d'écran, également connu sous le nom d'algorithme d'incrustation chroma. Bref, ce que nous faisons, c'est Échangez tous les pixels verts de l'image avant avec leurs homologues correspondants dans l'image arrière Image d’arrière-plan.

En outre, nous devons nous rappeler que la taille de l'image de sortie doit correspondre à la taille de l'image de sortie. image avant. À l'étape suivante, copiez les pixels de l'image suivante dans la nouvelle image. image. Utilisez les pixels correspondants de l'image d'arrière-plan au lieu de copier les pixels verts.

Ne manquez pas d'inclure les fichiers sources suivants dans votre code HTML avant d'appliquer ce qui suit Code-

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

Le code JavaScript requis pour implémenter cet algorithme est fourni ci-dessous. Pour l'utiliser, vous devez créer Écrivez votre propre code HTML.

Code source HTML

Vous devez ajouter ce code HTML à l'élément de votre document 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()">

Code source CSS

Ensuite, le code CSS dans le document HTML

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

Code source JavaScript

Vous devez ajouter le code JavaScript suivant dans la balise <script> de votre document HTML</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>

Exemple

Vérifions maintenant le code complet et la sortie dans le code suivant.

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

Vous verrez cet écran de sortie sans ajouter d'images.

Ensuite, après avoir ajouté les images « Première image » et « Image d'arrière-plan », vous verrez cet écran de sortie.

Vous verrez maintenant le résultat final après avoir cliqué sur le bouton "Fusionner les images". Les deux images sont La combinaison est présentée ci-dessous.

Deux images servent d’entrée à l’algorithme. La première est la première image avec l'arrière-plan vert, la seconde est l'image d'arrière-plan qui doit être utilisée à la place du vert arrière-plan.

JavaScript combine deux images après les avoir reçues en entrée, donc le retard ; L'image remplace le fond vert de l'image suivante. Afin de mettre en œuvre le vert Algorithme de dépistage, le code est fourni ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html 算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un canevas avec une image de fond en utilisant FabricJS ?Article suivant：Comment créer un canevas avec une image de fond en utilisant FabricJS ?

Articles Liés

Voir plus