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，它返回元素的实际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值以查找近白色。参考here

点击此处查看demo

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

2 个答案: