javascript - 根据背景图片动态调整文字颜色

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;

}

Answer 1

我终于找到了可以做我想做的事!进入布赖恩冈萨雷斯的
jquery.adaptive-backgrounds.js .看一下这个:

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

我刚刚注释掉了 backgroundColor 规则并为颜色创建了一个新规则。对于白色文本，文本阴影如下:

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

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