使用JQuery在页面上仅反转白色到黑色

Question

如果是的话，是否有可能使用jquery将html页面上的白色颜色反转为黑色？ 不寻找反转所有颜色，这是有效的。 像这样：

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

但我希望只将白色像素反转为整个页面的黑色像素，包括图像。

Answer 1

一个有趣的问题，恕我直言:)

我不会委托给css("color")因为该元素可以从父母那里继承它的颜色。 最可靠的方法是getComputedStyle ，它返回element的实际CSS属性，无论浏览器如何计算它。

注意颜色可以是其中一种树形式：颜色名称如'white'，短值如'#FFFFFF'或'#ffffff'或rgb / rgba如rgb（255,255,255）。 你应该注意所有的情况！

所以，代码应该类似于以下代码：

$(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");
    }    
});

对于图像，您可以使用画布。 在相同的元素循环内：

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");
}

最后，如果你想处理“几乎白色”的颜色，例如“254,252,255”，你需要计算亮度分量

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

和阈值结果类似>= 250

Answer 2

您可以尝试在点击事件中写这个

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

写这样的IF情况来检查所有“近”白​​色

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

 }

更改RGB值以查找近白色。 这里参考

点击这里进行演示