[英]Invert Only White Colors To Black With JQuery On a Page
Is it possible, if yes how, to invert only white colors on an html page to black using jquery? 如果是的话,是否有可能使用jquery将html页面上的白色颜色反转为黑色? 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. 但我希望只将白色像素反转为整个页面的黑色像素,包括图像。
An interesting question, IMHO :) 一个有趣的问题,恕我直言:)
I wouldn't entrust to css("color")
because the element can inherit its color from parents. 我不会委托给
css("color")
因为该元素可以从父母那里继承它的颜色。 The most reliable method is getComputedStyle
which returns an actual CSS property of element, doesn't matter how browser calculates it. 最可靠的方法是
getComputedStyle
,它返回element的实际CSS属性,无论浏览器如何计算它。
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). 注意颜色可以是其中一种树形式:颜色名称如'white',短值如'#FFFFFF'或'#ffffff'或rgb / rgba如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 最后,如果你想处理“几乎白色”的颜色,例如“254,252,255”,你需要计算亮度分量
Y = 0.299 * R + 0.587 * G + 0.114 * B
and threshold the result for something like >= 250
和阈值结果类似
>= 250
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情况来检查所有“近”白色
if(field.css('background-color') == 'rgb(255, 255, 255)') {
}
change the RGB value to find near white. 更改RGB值以查找近白色。 reference here
这里参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.