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

Question

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

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

这可能吗？

这是我的网站：http://myhrmans.com/hulebild2/（文本“欢迎”是目标） 我已经看过https://github.com/kennethcachia/Background-Check/ 并且还没有让它工作。

感谢您的帮助！

Answer 1

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

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

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

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

然后只需在左右括号上执行一些子字符串即可获取 url。然后获取原始的 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')