Как получить средний или основной цвет изображения с помощью JavaScript?

Question

я хочу получить среднее значение HEX или RGB из изображения на другой фон Div этого цвета.

Так что, если я загружаю изображение с красным, я получаю что-то вроде # FF0000просто в качестве примера.

Дайте мне знать, если это возможно:)

Большое спасибо.

Answer 1

Сначала нарисуйте изображение на canvas:

function draw(img) {
    var canvas = document.createElement("canvas");
    var c = canvas.getContext('2d');
    c.width = canvas.width = img.width;
    c.height = canvas.height = img.height;
    c.clearRect(0, 0, c.width, c.height);
    c.drawImage(img, 0, 0, img.width , img.height);
    return c; // returns the context
}

Теперь вы можете перебирать пиксели изображения. Наивный подход к обнаружению цвета заключается в простом подсчете частоты каждого цвета на изображении.

// returns a map counting the frequency of each color
// in the image on the canvas
function getColors(c) {
    var col, colors = {};
    var pixels, r, g, b, a;
    r = g = b = a = 0;
    pixels = c.getImageData(0, 0, c.width, c.height);
    for (var i = 0, data = pixels.data; i < data.length; i += 4) {
        r = data[i];
        g = data[i + 1];
        b = data[i + 2];
        a = data[i + 3]; // alpha
        // skip pixels >50% transparent
        if (a < (255 / 2))
            continue; 
        col = rgbToHex(r, g, b);
        if (!colors[col])
            colors[col] = 0;
        colors[col]++;
    }
    return colors;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

getColors возвращает карту имен цветов и количества. Прозрачные пиксели пропускаются. Получить наиболее часто встречающийся цвет с этой карты должно быть тривиально.

Если вы в буквальном смысле хотите получить среднее каждого цветового компонента, вы можете легко получить это из результатов getColors, но результаты вряд ли будут очень полезными. Этот ответ объясняет гораздо лучший подход.

Вы можете использовать все это так:

// nicely formats hex values
function pad(hex) {
    return ("000000" + hex).slice(-6);
}

// see this example working in the fiddle below
var info = document.getElementById("info");
var img = document.getElementById("squares");
var colors = getColors(draw(img));
for (var hex in colors) {
    info.innerHTML += "<li>" + pad(hex) + "->" + colors[hex];
}

См. рабочий пример .

Answer 2

• Поместить изображение на холст.
• Получить 2D-контекст.
• Прокрутить пиксели и сохранить каждое значение r, g, b.Если вы найдете то же самое, увеличьте его один раз.
• Переберите сохраненные значения r, g, b и запишите наибольшее значение r, g, b.
• Преобразование r, g, б в гекс .

Answer 3

Это возможно только при использовании тега canvas, как описано здесь:

http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Конечно, это доступно только в новых браузерах

Answer 4

Вы можете рассмотреть возможность использования сверточных фильтров, которые css позволяет вам применять.Это может помочь получить желаемый эффект (при условии, что вы хотите представить его обратно в html).Таким образом, вы можете отобразить изображение дважды, один свернутый.

Это, как говорится, на самом деле не работает, если вам нужна информация для какой-то цели.

Answer 5

Для нахождения этого среднего цвета:

1. Поместить изображение на холст
2. Изменить размер изображения до 1px
3. Получить цвет полученного пикселя (этот пиксель будет вычисленным средним)