Implémenter des algorithmes d'écran vert à l'aide de JavaScript-js tutoriel-php.cn

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion