Invert Only White Colors To Black With JQuery On a Page

Question

Is it possible, if yes how, to invert only white colors on an html page to black using jquery? Not looking for inverting all colors, that works. Like this:

var css = 'html {-webkit-filter: invert(100%);' +
'-moz-filter: invert(100%);' + 
'-o-filter: invert(100%);' + 
'-ms-filter: invert(100%); }'

But I'm looking to invert only white pixels to black pixels of the whole page including images.

Answer 1

An interesting question, IMHO :)

I wouldn't entrust to css("color") because the element can inherit its color from parents. The most reliable method is getComputedStyle which returns an actual CSS property of element, doesn't matter how browser calculates it.

Pay attention that color can be in one of the tree forms: a color name like 'white', a short value like '#FFFFFF' or '#ffffff' or rgb / rgba like rgb(255, 255, 255). You should take care on all the cases!

So, the code should be like the following one:

$(body').find('*').each(function(){
    var color = window.getComputedStyle($(this).get(0), null).backgroundColor;
    if ((color.toLowerCase() == "white") ||
        (color.toLowerCase() == "#ffffff") ||
        (color.toLowerCase() == "rgb(255,255,255)")) {
            $(this).css("background-color", "black");
    }    
});

For images you can use canvas. Inside the same loop of elements:

if ($(this).attr("tagName") == "img"){
    invertImage($(this).get(0));
}

function invertImage(img){
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);
    var imageData = ctx.getImageData(0, 0, img.width, img.height);    

    var data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        if ((data[i] == 255) && (data[i+1] == 255) && (data[i+2] == 255)){
            data[i] = 0;
            data[i+1] = 0;
            data[i+2] = 0;
        }
    }

    ctx.putImageData(imageData, 0, 0);
    $(img).get(0).src = canvas.toDataURL("image/png");
}

And finally, if you want to handle also 'almost white' colors, for example '254, 252, 255' than you need to calculate the luma component as

Y = 0.299 * R + 0.587 * G + 0.114 * B

and threshold the result for something like >= 250

Answer 2

You can try like this writing this in on click event

$("#your_ID").click(function () {
    $("div").each(function () {
    var color = $(this).css("color");
            if (color == "#FFFFFF") {
                $(this).css("color", "#000000");
            }
 });
});

Write your IF case like this to check all "near" white color

if(field.css('background-color') == 'rgb(255, 255, 255)') {

 }

change the RGB value to find near white. reference here

Click here for demo