根据背景图像更改文本的颜色

时间:2014-01-21 21:09:35

标签: javascript html css colors

我需要解决我的问题(如果有的话):

我想检查div后面的背景图像的颜色值(在我的情况下是.picturecenter),然后如果背景的值很暗,则将颜色从黑色更改为白色。

这可能吗?

这是我的网站:http://myhrmans.com/hulebild2/(文字“欢迎”是目标) 我已经查看了https://github.com/kennethcachia/Background-Check/并且没有让它工作。

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您可以使用canvas元素进行像素读取。在这里查看功能。

[通过javascript获取图片的平均颜色

您必须处理图像元素而不是处理图像背景的div元素。但是你可以从背景中解析图像src

var bg = $('.picturecenter').css('background-image')

然后只需在左侧和右侧的parens上做一些子字符串即可获得网址。然后获取原始的javascript img元素。

var imgElement = document.createElement('img');
imgElement.src = bg;

并在上面的链接中调用该方法。

var colors = getAverageRGB(imgElement);

然后你可以将颜色平均在一起,看它是否足够黑。

之类的东西
var avg = (colors.r + colors.g + colors.b) / 3;
if (avg < 100)
    $('.textcenter').css('color', '#EEE')
else
    $('.textcenter').css('color', '#333')