Green screen is a technique where you compose two images into one. The technique uses a contrasting colour – normally green or blue, and removes that colour from the frame, replcaing it with another image. With the Canvas getImageData() and putImageData() methods we can write a Green Screen script. Please note, this is an extension of my previous tutorial (HTML 5 – getImageData() and putImageData()). This demonstration illustrates how we can use the canvas element to create a green screen.
The end result should look like this:
Green Screen
We will need 4 canvases and load in 3 images. The first image would be the overlay image. This image would be the image that replaces the green portion of the image. The second image is the green screen image. Here we have an image with a green background and a scribble in front of it. The third image is the green screen colour. This is the colour that we will be using as the knockout colour.
The way we want to build out this script is to grab all of the canvas context image data. We would loop through the green screen image and replace each pixel of the knockout colour with the overlay image.
function greenScreen( gSContext, overlayContext, knockoutContext ) {
var greenScreenMergedArray = gSContext.getImageData( 0, 0, gSContext.canvas.width, gSContext.canvas.height );
var overlayScreenMergedArray = overlayContext.getImageData( 0, 0, overlayContext.canvas.width, overlayContext.canvas.height );
var knockoutScreenMergedArray = knockoutContext.getImageData( 0, 0, knockoutContext.canvas.width, knockoutContext.canvas.height );
var greenScreenMergedData = greenScreenMergedArray.data;
var overlayScreenMergedData = overlayScreenMergedArray.data;
var knockoutR = ( knockoutScreenMergedArray.data[0] - 170 > 0 ) ? knockoutScreenMergedArray.data[0] - 170 : 0;
var knockoutG = ( knockoutScreenMergedArray.data[1] - 170 > 0 ) ? knockoutScreenMergedArray.data[1] - 170 : 0;
var knockoutB = ( knockoutScreenMergedArray.data[2] - 170 > 0 ) ? knockoutScreenMergedArray.data[2] - 170 : 0;
var i;
for( i = 0; i < greenScreenMergedData.length; i+=4 ) {
var r = greenScreenMergedData[i];
var g = greenScreenMergedData[i+1];
var b = greenScreenMergedData[i+2];
var a = greenScreenMergedData[i+3];
if( parseInt(r) >= knockoutR && parseInt(g) >= knockoutG && parseInt(b) >= knockoutB ) {
//greenScreenMergedData[i+3] = 0;
var overlayR = overlayScreenMergedData[i];
var overlayG = overlayScreenMergedData[i+1];
var overlayB = overlayScreenMergedData[i+2];
var overlayA = overlayScreenMergedData[i+3];
greenScreenMergedData[i] = overlayR;
greenScreenMergedData[i+1] = overlayG;
greenScreenMergedData[i+2] = overlayB;
greenScreenMergedData[i+3] = overlayA;
}
}
return greenScreenMergedArray;
}
This code is intended to take the green screen image and replace the green with the background. Once all of the processing is completed, I am returning the newly merged green screen image for any additional image modifications or to place it back in the canvas. I have a static number of 170 as I find that it is the most accurate removing the green from gradients. I plan on including a threshold forumla to replace the static 170.
See this code in action:
Green Screen