Scribd
Upload
167 views

Green Screen Web Page: Moving To Codepen

This document describes creating an interactive green screen web page. It discusses moving code from an existing program to CodePen, designing the HTML page with file input elements to load images, using JavaScript to load and draw the images, and performing the green screen compositing by iterating through pixels, checking the green value, and setting the output pixel from the foreground or background image. Functions are created to load images, clear canvases, and perform the main green screen operation.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
167 views

Green Screen Web Page: Moving To Codepen

This document describes creating an interactive green screen web page. It discusses moving code from an existing program to CodePen, designing the HTML page with file input elements to load images, using JavaScript to load and draw the images, and performing the green screen compositing by iterating through pixels, checking the green value, and setting the output pixel from the foreground or background image. Functions are created to load images, clear canvases, and perform the main green screen operation.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Green Screen Web Page

Moving to CodePen
Green Screen
• Use HTML elements to create an
interactive green screen page
• Load images — create composite!
Green Screen
• Use HTML elements to create an
interactive green screen page
• Load images — create composite!
Moving Code from DLTP to CodePen
Steps:
• Create input elements to select files
• Use event handlers
• Create functions to load images
• Create global variables for uploaded
images
• Use drawTo method, instead of print
• Protect your code with checks
Designing the Web Page
Designing the Web Page
Designing the Web Page
HTML File Elements

Foreground: <input type="file"


multiple="false" accept="image/*" id="fgfile"
onchange="loadForegroundImage()" >

Background: <input type="file"


multiple="false" accept="image/*" id="bgfile"
onchange="loadBackgroundImage()" >
HTML File Elements

Foreground: <input type="file"


multiple="false" accept="image/*" id="fgfile"
onchange="loadForegroundImage()" >

Background: <input type="file"


multiple="false" accept="image/*" id="bgfile"
onchange="loadBackgroundImage()" >
HTML File Elements

Foreground: <input type="file"


multiple="false" accept="image/*" id="fgfile"
onchange="loadForegroundImage()" >

Background: <input type="file"


multiple="false" accept="image/*" id="bgfile"
onchange="loadBackgroundImage()" >
HTML File Elements

Foreground: <input type="file"


multiple="false" accept="image/*" id="fgfile"
onchange="loadForegroundImage()" >

Background: <input type="file"


multiple="false" accept="image/*" id="bgfile"
onchange="loadBackgroundImage()" >
HTML File Elements

Foreground: <input type="file"


multiple="false" accept="image/*" id="fgfile"
onchange="loadForegroundImage()" >

Background: <input type="file"


multiple="false" accept="image/*" id="bgfile"
onchange="loadBackgroundImage()" >
JavaScript to Load Images
var fgImage = null;

function loadForegroundImage() {
var imgFile =
document.getElementById("fgfile");
fgImage = new SimpleImage(imgFile);
var canvas =
document.getElementById("fgcan");
fgImage.drawTo(canvas);
}
Green Screen Preliminaries
Green Screen Preliminaries
function greenScreen() {
if (fgImage == null || ! fgImage.complete()) {
alert("foreground not loaded");
return;
}
if (bgImage == null || ! bgImage.complete()) {
alert("background not loaded");
}
clearCanvas();
[…]
}
Green Screen Preliminaries
function greenScreen() {
if (fgImage == null || ! fgImage.complete()) {
alert("foreground not loaded");
return;
}
if (bgImage == null || ! bgImage.complete()) {
alert("background not loaded");
}
clearCanvas();
[…]
}
Green Screen Preliminaries
function greenScreen() {
if (fgImage == null || ! fgImage.complete()) {
alert("foreground not loaded");
return;
}
if (bgImage == null || ! bgImage.complete()) {
alert("background not loaded");
}
clearCanvas();
[…]
}
Green Screen Preliminaries
function greenScreen() {
if (fgImage == null || ! fgImage.complete()) {
alert("foreground not loaded");
return;
}
if (bgImage == null || ! bgImage.complete()) {
alert("background not loaded");
}
clearCanvas();
[…]
}
Green Screen Preliminaries
function greenScreen() {
if (fgImage == null || ! fgImage.complete()) {
alert("foreground not loaded");
return;
}
if (bgImage == null || ! bgImage.complete()) {
alert("background not loaded");
}
clearCanvas();
[…]
}
Green Screen Programming
var output =
new SimpleImage(fgImage.getWidth(),
fgImage.getHeight());
for(var pixel of fgImage.values()) {
var x = pixel.getX();
var y = pixel.getY();
if (pixel.getGreen() > greenThreshold) {
var bgPixel = bgImage.getPixel(x, y);
output.setPixel(x, y, bgPixel);
}
else {
output.setPixel(x,y,pixel);
}
}
Finishing Green Screen
• Draw the resulting image to canvas
• use .drawTo(canvas) to display image
• clear canvases before drawing
Finishing Green Screen

You might also like