Javascript 基于背景图像颜色自动对比文本颜色

我正在寻找一种方法，根据名为“banner”的div中背景图像的主颜色，将文本的颜色更改为#000或#fff。背景图像是随机选择在每一页，所以我需要能够做到这一点自动。我遇到过，但我很难理解如何正确使用它。我注意到我发布的链接提供了一个javascript解决方案，我还阅读了jquery中可能的解决方案

我对函数一无所知，所以如果有人能清楚地解释我是如何实现这一点的，我在哪里放置函数以及如何“调用它们”（如果这是正确的术语！），我将非常感激

---

谢谢你的帮助。

你可以这样做。（使用和）

注意，这只适用于同一域上的图像以及支持HTML5画布的浏览器

“严格使用”；
var getAverageRGB=函数（imgEl）{
变量rgb={
b:0，
g:0，
r:0
};
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext&&canvas.getContext（'2d'）；
if（布尔值（上下文）==false）{
返回rgb；
}
var height=imgEl.naturalHeight | | imgEl.offsetHeight | | imgEl.height；
var width=imgEl.naturalWidth | | imgEl.offsetWidth | | imgEl.width；
canvas.height=高度；
画布宽度=宽度；
drawImage（imgEl，0,0）；
var数据；
试一试{
data=context.getImageData（0，0，宽度，高度）.data；
}捕获（e）{
console.error（'security error，img on diff domain'）；
返回rgb；
}
var计数=0；
变量长度=data.length；
//仅每5像素访问一次
var块大小=5；
var步长=（blockSize*4）-4；
对于（变量i=步长；i<长度；i+=步长）{
计数+=1；
rgb.r+=数据[i]；
rgb.g+=数据[i+1]；
rgb.b+=数据[i+2]；
}
rgb.r=数学地板（rgb.r/计数）；
rgb.g=数学地板（rgb.g/计数）；
rgb.b=数学楼层（rgb.b/计数）；
返回rgb；
};
var rgb=getAverageRGB（document.getElementById（'image'）；
var avgComplement=Colors.complement（rgb.r、rgb.b、rgb.g）；
var avgComplementHex=Colors.rgb2hex.apply（null，avgComplement.a）；
var恭维=parseInt（avgComplementHex.slice（1,16））；
document.body.style.backgroundColor='rgb（'+[
rgb.r，
rgb.g，
rgb.b
].join（“，”）+“）”；
var maxColors=0xFFFFFF；
变量中点=数学地板（最大颜色/2）；
document.getElementById（'text'）。style.color=赞美>中点？“#000'：#fff'

将车身背景设置为下图中的平均颜色，并将此文本设置为黑色或白色的互补颜色：
不确定答案是否有助于OP的可能重复。有关
免费
颜色，请参阅库。并了解如何获得图像的平均颜色。