Make color transparent

by loktar

HTML

<h3>Original Image</h3>
<img id="testImage" src='data:;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBggGBQkIBwgKCQkKDRYODQwMDRoTFBAWHxwhIB8cHh4jJzIqIyUvJR4eKzssLzM1ODg4ISo9QTw2QTI/ODUBCQoKDQsNGQ4OGTUkHiQ1NTU1NTU1NTU1NTU1NTUvNTUsNTQ1NTU1KTUsNTUtNTU1NTU1MzU1LDI1NSwsNSwpKf/AABEIAC0ALQMBIgACEQEDEQH/xAAbAAACAwADAAAAAAAAAAAAAAAFBwQGCAACA//EADUQAAEDAwIEAgcHBQAAAAAAAAECAwQABREGIRIxUWEHkRMUIkFxgcFScqGxstLwFRYyQmL/xAAZAQADAQEBAAAAAAAAAAAAAAADBAUCAQD/xAAkEQABBAIBAgcAAAAAAAAAAAABAAIDEQQhEhMxIjJBUYHB4f/aAAwDAQACEQMRAD8AeNVW663Cbg5bbDGFymtbOq4uFlk/9K957DzzUPxV1U/p7TrcW3uejn3JRabWObaAPbUO+4A+92oZ4ew2YljYS3wuFz2l7blR69eldNMZzcs3ZoIwf7pfAW7d48Uq/wBGIoUkfNW9df6rqe0H0j5iXiNjOEILT3yx7NFXra8uTxlZIA9nh/LFBJN3UJ7TCMBtDoStQBx3G9FhHWHgFoLpOJoqyaf1JA1JCL8FZCkHDrLgwto9FCitI2bqYWDV0G8xUlC3yUPtI5OJyAc/L8qd0d9uVGafZVxNuoC0HqCMivSxGM7RGP5BJLxuuHq+vbeh7iLLcDiSB9orV+0UU8NNUxJUpu0hCQsAuNr35cyD3zmvHx+szgXbL22gqbbBjPds7pP6vOlvaD6SY05HlLjLByHN+JKuoxvmmGY7MqAxE0ftBke6N/IJ2M+JPrUlyOxDWzkqDbqjniIPLGOeKruqNVzZaXkssrQkpJdKUZVw9zjYbfCoFvvku72pduuhYkFxfEy6yhPpELJHuyM5+HnVtc0s1aLQ+WJspbzzJQ4pfCUpA3zgj41UBw8EAuZR9tn5v87qYevI7zaSdub/AK1JLjiieBvCADyOf5+FaA8OZip+gLW8vdRbUnyUR9KRtwhTYK3lQnmltySEJJTlxefcke7fpWgNJ2k2LSlut6v82GEhf3jur8San500U1OjNhUMUEDalXm0Rb9aJFvnNhxh9PCofUd6z9f9C3DQ9zUp6O7LgZJakNdOiuhrR1dXG0PNlDiErSeaVDINIxyGM2E05gd3WftN31AQUoeQ2UHiQVLSFJPwOaISrwzNC83B2QFq2itrUsLPYD601JWgtOTHS49aYxWeZCcVNt2m7TaTmDAYZV9pKN/OtTvbONhCEI9VSdEaIkSJrV4vkZLCWTxRIp3Keild6ZFcrlBFAUEcABf/2Q=='/>

<h3>Modified Image</h3>
<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 45;
ctx.drawImage(image,0,0);
    
var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        if(g > 150){ 
            // If the green component value is higher than 150
            // make the pixel transparent
            pix[i + 3] = 0;
        }
}

ctx.putImageData(imgd, 0, 0);