Image Green Screen

image-green-screen.markdown

Image Green Screen

A Pen by Schindst on CodePen.

License.

index.html

<script src= "https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
<h1>Upload an Image</h1>
<canvas id="canl" ></canvas>
<canvas id="canr" ></canvas>
<p>Foreground:
<input type="file" multiple="false" accept="image/*" id="fginput" onchange="loadForegroundImage()" ></p>
<p>Background:
<input type="file" multiple="false" accept="image/*" id="bginput" onchange="loadBackgroundImage()" ></p>
<p>
<input type="button" value="Create Composite" onclick="doGreenScreen()" >
 <input type="button" value="Clear Canvases" onclick="clearCanvas()" >
</p>

script.js

var fgImage = null;
var bgImage = null;
var output = null;
var canvas;

function loadForegroundImage() {
  var fginput = document.getElementById("fginput");
  fgImage = new SimpleImage(fginput);
  canvas = document.getElementById("canl");
  fgImage.drawTo(canvas);
};

function loadBackgroundImage() {
  var bginput = document.getElementById("bginput");
  bgImage = new SimpleImage(bginput);
  canvas = document.getElementById("canr");
  bgImage.drawTo(canvas);
};

function doGreenScreen() {
  if (fgImage == null) {
    alert('please select foreground image');
  } else if (!fgImage.complete() || !bgImage.complete()) {
    alert('please wait until pictures are loaded');
  } else if(bgImage == null) {
    alert('Please select background image');
  } else {
    doClear("canr");
    greenScreenLoop();
  }
  
};

function clearCanvas() {
  doClear("canl");
  doClear("canr");
  
};

function doClear(canvas_id) {
  canvas = document.getElementById(canvas_id);
  var context = canvas.getContext("2d");
  context.clearRect(0,
                    0,
                    canvas.width,
                    canvas.height);
  
};

function greenScreenLoop() {
  var newImage = new SimpleImage(fgImage.getWidth(), fgImage.getHeight());
  for(var fgPixel of fgImage.values()) {
    var x = fgPixel.getX();
    var y = fgPixel.getY();
    if (fgPixel.getGreen() > fgPixel.getRed() + fgPixel.getBlue()) {
        var bgPixel = bgImage.getPixel(x, y);
        newImage.setPixel(x, y, bgPixel);
    } else {
        newImage.setPixel(x, y, fgPixel);
    }
}
  canvas = document.getElementById("canr");
  newImage.drawTo(canvas);
}

style.css

body {
  text-align: center;
  background-color: lightgray;
  margin: 30px;
}

canvas {
  background-color: white;
  margin: 5pt;
  width: 250px;
}

simple interactive website for green screen