使用 JavaScript 实现绿屏算法

绿屏算法(也称为色键算法)用于更改绿色的背景图像并将其替换为任何效果或其他图像。基本上我们正在做的是，我们用背景图像中的相应像素替换前向图像中的所有绿色像素。此外，我们必须记住输出图像的大小，它应该与前向图像相同。然后将来自前向图像的像素复制到新图像中。背景图像的相应像素被复制而不是绿色像素。

在实现以下代码之前，不要忘记在 HTML 代码中提及以下源文件：

以下是实现该算法的 JavaScript 代码。你必须自己编写 HTML 代码来实现它：

例子：

HTML

  

    
    
      
    
        canvas {
            background: lightgray;
            border: 1px solid black;
            width: 450px;
            height: 300px;
            margin: 30px;
        }
    

  

  
    Green Screen Algorithm
  
     
    
    
  
      

        Forward Image: 
    
  
      
      

        Background Image: 
    
  
      
    
  
    
        var imgFG = null;
        var imgBG = null;
  
        // This function takes forward image as input
        function frontimg() {
            var fileInput = document.getElementById("fgFile");
            var canvas = document.getElementById("pic1");
            imgFG = new SimpleImage(fileInput);
            imgFG.drawTo(canvas);
        }
  
        // This function takes background image as output
        function backimg() {
            var fileInput = document.getElementById("bgFile");
            var canvas = document.getElementById("pic2");
            imgBG = new SimpleImage(fileInput);
            imgBG.drawTo(canvas);
        }
  
        // This function merges both the image and
        // produces the resultant image as output
        // Implementation of Green Screen Algorithm
        function merge() {
            clear();
            var pic1 = document.getElementById("pic1");
  
            var outputImage = new SimpleImage(
                    imgFG.width, imgFG.height);
  
            for (var pixel of imgFG.values()) {
                if (pixel.getGreen() > pixel.getRed() 
                                + pixel.getBlue()) {
                    var x = pixel.getX();
                    var y = pixel.getY();
                    var newPixel = imgBG.getPixel(x, y);
                    outputImage.setPixel(x, y, newPixel);
                }
                else {
                    outputImage.setPixel(pixel.getX(),
                            pixel.getY(), pixel);
                }
            }
            outputImage.drawTo(pic1);
        }
  
        // This function clears the previous 
        // fetched input and output.
        function clear() {
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var context = pic1.getContext("2d");
            context.clearRect(0, 0, pic1.width, pic1.height);
            context = pic2.getContext("2d");
            context.clearRect(0, 0, pic2.width, pic2.height);
        }
    >

  

输出：

该算法以两张图像作为输入。一种是背景中包含绿色的前向图像，另一种是要替换绿色背景的背景图像。

将两个图像作为输入后，以下代码合并两个图像，因此后向图像替换前向图像的绿色背景。所以，上面是实现绿屏算法的代码。