$(function(){

    var img = $("#source").get(0);

    var $canvasbg = $("<div id='target-container' />");

    var canvas = $("<canvas class='greenscreen'></canvas>").get(0);

    $canvasbg.append(canvas);

    $('#container').append($canvasbg);

    img.onload = function() {

        greenScreen(img, canvas, $canvasbg);

    };

​

});

​

function greenScreen(img, canvas, $container, bg) {

    var context = canvas.getContext('2d');

    canvas.width = img.clientWidth;

    canvas.height = img.clientHeight;

    $container.width(img.clientWidth);

    $container.height(img.clientHeight);

    context.drawImage(img, 0, 0);

​

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    var data = imageData.data;

    var start = {

        red: data[0],

        green: data[1],

        blue: data[2]

    };

​

​

    // iterate over all pixels

    for(var i = 0, n = data.length; i < n; i += 4) {

        var diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);

        data[i + 3] = (diff*diff)/$('#tolerance').val();

    }

    context.putImageData(imageData, 0, 0);

    $container.css('background',$('#color').val());

}