Implement green screen algorithms using JavaScript-JS Tutorial-php.cn

使用 JavaScript 实现绿屏算法

The green background image has been changed and replaced with any effects or other images that use green Screen algorithm, also known as chroma key algorithm. In short, what we are doing is Swap all green pixels in the forward image with their matching counterparts in the backward image Background picture.

Also, we need to remember that the size of the output image should match the size of the output image forward image. In the next step, copy the pixels from the forward image into the new image image. Use matching pixels from the background image instead of copying green pixels.

Don’t miss to include the following source files into your HTML code before applying the following Code -

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

Copy after login

The JavaScript code required to implement this algorithm is provided below. To use it you must create Write your own HTML code.

HTML source code

You must add this HTML code to an element of your HTML document.

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

Copy after login

CSS source code

Next, the CSS code in the HTML document

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

Copy after login