green screen webpage

green-screen-webpage.markdown

green screen webpage

A Pen by suhaas on CodePen.

License.

index.html

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

<h1> GREEN SCREEN & GRAYSCALE CONVERSION WEB PAGE  </h1><br>
<canvas id="canvasID1"> </canvas>

<canvas id="canvasID2"> </canvas>

<p>
  Add GreenScreen Image:
<input type="file" multiple="false" accept="image/*" onclick="uploadFile1()" id="b1">
</p>

<p> 
  Add Background Image:
  <input type="file" multiple="false" accept="image/*" onclick="uploadFile2()" id="b2">
</p>

<p>
<input type="button" value="combine" onclick="combine()"><br><br>

<canvas id="canvasID3"> </canvas>
</p>

<p>
<input type="button" value="make grayscale" onclick="grayScale()"><br><br>

<canvas id="canvasID4"> </canvas>
</p>

script.js

var img1;
var img2;

function uploadFile1(){
var canvasElement1 = document.getElementById("canvasID1");
var canvasElement2 = document.getElementById("canvasID2");  
var canvasElement3 = document.getElementById("canvasID3");
  
  var fElem1 = document.getElementById("b1");
  img1 = new SimpleImage(fElem1);
  img1.drawTo(canvasElement1);
}

function uploadFile2(){
var canvasElement1 = document.getElementById("canvasID1");
var canvasElement2 = document.getElementById("canvasID2");  
var canvasElement3 = document.getElementById("canvasID3");
  
  var fElem2 = document.getElementById("b2");
  img2 = new SimpleImage(fElem2);
  img2.drawTo(canvasElement2);
}

function combine(){
  var canvasElement1 = document.getElementById("canvasID1");
  var canvasElement2 = document.getElementById("canvasID2");
  var canvasElement3 = document.getElementById("canvasID3");
  
  for(var pixel of img1.values())
    {
      if(pixel.getGreen() > pixel.getRed()+pixel.getBlue())
        {
          var img2Pixel =                 img2.getPixel(pixel.getX(), pixel.getY());
          img1.setPixel(pixel.getX(), pixel.getY(), img2Pixel);
        }
      else
        {
          img1.setPixel(pixel.getX(), pixel.getY(), pixel);
        }
    }
  img1.drawTo(canvasElement3);
}

function grayScale(){
  var canvasElement1 = document.getElementById("canvasID1");
  var canvasElement2 = document.getElementById("canvasID2");
  var canvasElement3 = document.getElementById("canvasID3");
  var canvasElement4 = document.getElementById("canvasID4");
    for( var pixel of img1.values()){
    var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);
  }
  img1.drawTo(canvasElement4);
}

style.css

canvas{
  width:300px;
  height:200px;
  border:1px solid black;
}