Как определить преобладающий цвет?

202
08 сентября 2019, 20:40

Есть картинка, хочу определить на ней преобладающий цвет. Или как это сделано у яндекс.дзена

Как видите, там где текст там под него накладывается цвет, который закрывает изображение, чтобы текст был четко виден, цвет(фон) под текстом всегда разный, я заметил что это зависит от изображения.

Как подобное сделать средствами css или jquery ?

Answer 1

Я пользовался для точно такой же задачи функцией из вот этого примера

http://jsfiddle.net/xLF38/818/

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 */
        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('img'));
document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';

Есть нюанс, работает только для картинок, которые подтягиваются из того же домена. В коде есть комментарий security error, img on diff domain. Если кто-нибудь знает, как это вылечить — поправьте мой ответ.

На практике надо еще под базовый цвет подбирать цвет текста, хотябы в разрезе темный на светлом и светлый на темном.

READ ALSO
Как отсортировать массив страниц?

Как отсортировать массив страниц?

Коллеги, на сайте есть страницы

135
Jquery берет старый элемент

Jquery берет старый элемент

Возникла проблема при обновлении страницы с помощью AjaxПо идее oldImage и newImage Это один и тот же элемент

99
Перехват запросов посредством &ldquo;JS&rdquo; в &ldquo;Chrome&rdquo;?

Перехват запросов посредством “JS” в “Chrome”?

Как можно сделать перехват запросов посредством JS в "Chrome" ? Например, чтобы на любой запрос на какой-то или на все сайты мне возвращалась строка...

107
mpdf - перенос строк в шапке таблицы

mpdf - перенос строк в шапке таблицы

При формировании таблицы в mpdf необходимо развернуть текст в шапке и в заданных местах перенестиВот пример кода:

117