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

Question

我需要解决我的问题的方法（如果有）：

我想检查位于div（在我的情况下为.picturecenter）后面的背景图像的颜色值，然后如果背景值为暗，则将颜色从黑色更改为白色。

这可能吗？

这是我的网站： http : //myhrmans.com/hulebild2/ （目标是文本“ Welcome”）我已经查看过https://github.com/kennethcachia/Background-Check/ ，但是还没有工作。

感谢您的帮助！

Answer 1

您可以使用canvas元素进行像素读取。 在此处检查功能。

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

您将不得不处理图像元素，而不是具有图像背景的div元素。 但是您可以从背景中解析出图像src

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

然后只需在左右括号内做一些子字符串即可获得网址。 然后获取原始的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')