Javascript 在页面上使用JQuery仅将白色反转为黑色

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

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

但我希望将整个页面（包括图像）中的白色像素转换为黑色像素。

您可以这样尝试 在点击事件中写入此内容

$("#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值以查找近似白色。参考文献

---

单击此处查看一个有趣的问题，IMHO:）

我不会委托

css（“color”）

，因为元素可以从父元素继承其颜色。最可靠的方法是

getComputedStyle

，它返回元素的实际CSS属性，而不管浏览器如何计算它

请注意，颜色可以是树形式之一：颜色名称如“白色”，短值如“#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");
}

---

阈值对于像

=250

这样的结果，你是指任何定义为白色的颜色或任何白色像素（包括在图像中）？前者简单，后者几乎不可能。最好是第二种，但是如果这是唯一可能的话，第一个会很好。第二个是不可能的。我认为这会使网页的内容变得模糊。但是为什么要将所有的白色变为黑色呢？如果你想在任何网页上反转颜色以使你的眼睛不那么痛苦，你可以使用userstyles.org上的时髦脚本或插件对于chrome来说，就像是一个实验项目。使用jQuery真的很棒，因为这将帮助我将其扩展到大多数网站。将白色定义的颜色转换为黑色将是一个很好的开始。在这种情况下，我将以不同的方式处理图像。对于图像，您需要为每个图像创建一个单独的图像，将白色反转为黑色。然后单击，将图像更改为具有反转颜色的图像。Tnx用于发布此内容，不幸的是，我似乎无法使其正常工作。它是否只在某些浏览器中起作用？白色背景中不可见。因此，再次检查，如果有效，接受这个答案，否则不要。你能解释一下你说的“计算亮度分量”是什么意思吗？“亮度分量”是YUV颜色编码系统中的Y分量。您可以在以下网站了解更多信息：

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