根据背景图片颜色自动对比文字颜色 [英] Automatically contrasting text color based on background image color

问题描述

我正在寻找一种方式来将文本的颜色更改为＃000或#fff，具体取决于div中称为横幅的背景图片的主要颜色。在每个页面上随机选择背景图像，因此我需要能够自动执行此操作。我遇到了 JavaScript color contraster ，但我很难理解如何正确使用它。我注意到我发布的链接在JavaScript中提供了一个解决方案，我也阅读了一个可能的解决方案在jquery。

I'm looking for a way to change the color of text to either #000 or #fff depending on the main color of a background image within a div called "banner". The background images are chosen at random on each page so I need to be able to do this automatically. I came across JavaScript color contraster but I'm struggling to understand how to use it properly. I notice the link I've posted gives a solution in javascript and I've also read about a possible solution in jquery.

我无能为力，如果任何人可以清楚地解释我如何实现这一点，我在哪里放置功能和如何他们（如果这是正确的术语！）使用它，我会非常感激。

I'm clueless with functions so if anyone could explain clearly how I could achieve this, where I place functions and how I "call them" (if that's the right term!) to use it I'd be really grateful.

感谢任何帮助。

推荐答案

您可以这样做。 （使用 Colours.js 和此答案）

You could do something like this. (using Colours.js and this answer)

请注意，这只适用于同一网域的图片和支持HTML5 canvas的浏览器中。

Note, this will only work with images on the same domain and in browsers that support HTML5 canvas.

JavaScript

Javascript

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;
}

var rgb = getAverageRGB(document.getElementById('i')),
    compliment = +("0x" + Colors.rgb2hex.apply(null, Colors.complement(rgb.r, rgb.b, rgb.g ).a).slice(1));

document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.b + ',' + rgb.g + ')';
document.getElementById('text').style.color = (compliment > 8388607 ? "#000" : "#fff");

在 jsfiddle

这篇关于根据背景图片颜色自动对比文字颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！