JSFiddle - React, Tailwind, and code Playground

HTML

<div id="poo">
    <div id="container">
        <img src="http://i.imgur.com/RylDs1h.jpg" crossOrigin="" />
    </div>
</div>

CSS

#greend{
    background:black;
    width:600px;
}

JavaScript

var img = $("img").get(0);
var $canvasbg = $("<div id='greend' />");
var canvas = $("<canvas></canvas>").get(0);
$canvasbg.append(canvas);
$('#container').append($canvasbg);

var $container =  $('#container');   
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 frame = context.getImageData(0, 0, canvas.width, canvas.height);    
var length = frame.data.length;
for (var i =0; i <length; i++){
    var r = frame.data [i*4+ 0];
    var g = frame.data [i*4 + 1];
    var b = frame.data [i*4 + 2];

     // replace white-ish colours.
     if(g > 240 && g < 256 && r > 240 && r < 256 && b > 240 && b < 256){  
        frame.data[i * 4 + 3] = 0;  
     } 
}
context.putImageData(frame, 0, 0);