Динамически настраивать цвет текста на основе фонового изображения

Я работаю над продуктом, который выводит изображения от пользователей, и информация об изображении накладывается поверх вышеупомянутых изображений. Как вы можете себе представить, изображения требуют разных цветов текста из-за легкости/темноты. Есть ли способ достичь этого с помощью JavaScript?

EDIT: я нашел аналогичный вопрос для моего, и было решение, данное в 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;

}

Ответ 1

Наконец-то я нашел что-то делать именно то, что я хочу! Введите Brian Gonzalez's jquery.adaptive-backgrounds.js. Проверьте это:

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

Я только что прокомментировал правило backgroundColor и сделал новый для цвета. Для белого текста текстовая тень, например:

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

должно быть достаточно. Спасибо всем за ваши ответы!

Ответ 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 только в области, где находится ваш текст, иначе вы получите неудовлетворительные результаты (он все равно будет работать). Удачи!

EDIT: Вам не нужно будет отображать изображение каким-либо особым образом. Просто убедитесь, что цвет текста наложения - это переменная textColor.

Ответ 3

вы можете проверить атрибут background-image с помощью jQuery, затем динамически изменить цвет текста.

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