根据背景图片动态调整文本颜色

Question

我正在开发一个产品，它可以接收用户上传的图片，并将图像信息叠加在上面。由于明暗度不同，这些图片需要使用不同的文本颜色。是否有办法用JavaScript实现这个功能？

编辑：我找到了一个类似问题的解决方案，jsfiddle给出了一个解决方案（http://jsfiddle.net/xLF38/818）。不过我在我的网站中使用jQuery。如何将原始的JavaScript代码转换为jQuery呢？

var rgb = getAverageRGB(document.getElementById('i'));
document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {
            r: 0,
            g: 0,
            b: 0
        }, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {
            r: 0,
            g: 0,
            b: 0
        },
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch (e) {
        /* security error, img on diff domain */
        alert('x');
        return defaultRGB;
    }

    length = data.data.length;

    while ((i += blockSize * 4) < length) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i + 1];
        rgb.b += data.data[i + 2];
    }

    // ~~ used to floor values
    rgb.r = ~~ (rgb.r / count);
    rgb.g = ~~ (rgb.g / count);
    rgb.b = ~~ (rgb.b / count);

    return rgb;

}

- NetOperator Wibby

---

使用白色文本和深色 text-shadow 怎么样？ - Wesley Murch

嗨，Wesley，这就是我现在正在做的。虽然它看起来还可以更好，但我不想用阴影过度修饰它。 - NetOperator Wibby

你找到任何可行的解决方案了吗？ - user4o01

@user4o01，我忘了，但我不认为我找到了任何特别有用的东西，可以完美地做我想要的事情。 - NetOperator Wibby

Answer 1

我终于找到了一个能够完全按照我的意愿进行操作的工具！看看Brian Gonzalez的jquery.adaptive-backgrounds.js吧：

$parent.css({
        // backgroundColor: data.color
        color: data.color
});

我刚刚注释掉了backgroundColor规则，并为颜色创建了一个新的规则。对于白色文本，使用类似下面的text-shadow：

text-shadow: 0 0 1px rgba($black, 0.3); // using Sass

应该足够了。感谢大家的回答！

- NetOperator Wibby

Answer 2

这可以使用canvas元素实现。您需要创建一个canvas元素，将图像元素绘制到画布中，获取画布的图像数据，查看文本所在的部分，将这些值转换为灰度，取平均值，然后将其与中间点进行比较。以下是一些示例代码：

var img = document.getElementById('myImage');
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var w = img.width, h = img.height;
c.width = w; c.height = h;
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(0, 0, w, h).data;
var brightness = 0;
var sX = 0, sY = 0, eX = w, eY = h;
var start = (w * sY + sX) * 4, end = (w * eY + eX) * 4;
for (var i = start, n = end; i < n; i += 4) {
      var r = data[i],
          g = data[i + 1],
          b = data[i + 2];
      brightness += 0.34 * r + 0.5 * g + 0.16 * b;
      if (brightness !== 0) brightness /= 2;
}
if (brightness > 0.5) var textColor = "#FFFFFF";
else var textColor = "#000000";

我没有测试过这段代码，但应该可以正常工作。确保只将sX，sY，eX，eY值更改为您的文本所在的区域，否则您将获得不令人满意的结果（它仍将正常工作）。祝你好运！

编辑： 您无需以任何特殊方式显示图像。只需确保覆盖文本的颜色是变量textColor。

- rvighne

---

谢谢rvighne，理论上这听起来应该是可行的。但我应该如何显示我的图像呢？像<canvas><img/></canvas>这样吗？此外，这些图像将全部具有相同的类。我可以使用getElementByClass吗？ - NetOperator Wibby

不用担心获取元素的类名，我需要使用 document.getElementsByClassName。 - NetOperator Wibby

将图像加载到画布中就是将其加载到画布对象中。此时，画布中没有<img>。 - Mike Kormendy

亮度返回NaN作为结果。有人知道为什么吗？ - user2335065

这很奇怪。我会尝试诊断问题。 - rvighne

Answer 3

你可以使用 jQuery 检查 background-image 属性，然后动态调整文本颜色。

var x = $(body).attr("background-image");
switch(x)
{
  case "something.png":
      // set color here
      break;
}

- jappple

---

嗨，user2501897，这对于一个小项目看起来不错，但是动态地如何运作呢？ - NetOperator Wibby

图像内容/颜色未知，因此这没有任何用处。 - Wesley Murch

不是动态的，不能从图像中选择适当的颜色 - 但是在表单加载时（或至少在背景图像被分配后），使用上述代码，您可以声明当图像名称为x时，文本颜色应该是y。 - jappple

动态的意思是我事先不知道图像的样子。这是用户生成内容，因此我不知道要将文本设置为哪种颜色。 - NetOperator Wibby

这个建议并不能达到预期的结果。@rvighne提供了一个解决方案来回答这个问题。 - Mike Kormendy