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

7

то, что я хочу, - это среднее значение HEX или RGB от изображения к другому знаку div этого цвета.

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

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

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

  • 1
    JavaScript не может обрабатывать загруженные файлы сам по себе.
  • 0
    Вы хотите только точный цвет пикселя или в пределах определенного диапазона HSV? (Я полагаю, что последний будет служить вам лучше.)
Теги:
image
canvas

5 ответов

12

Сначала нарисуйте изображение на 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];
}

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

4
  • Поместите изображение на холст.
  • Получить 2D-контекст.
  • Прокрутите по пикселям и сохраните каждое значение r, g, b. Если вы найдете то же самое, увеличьте его один раз.
  • Зациклируйте через сохраненные значения r, g, b и обратите внимание на наибольшие значения r, g, b.
  • Преобразовать r, g, b в hex.
  • 5
    19 строк для преобразования RGB в гекс? Дети в эти дни. ((r << 16) | (g << 8) | b)
  • 3
    @lwburk Да, я знаю, Google находит ответы, но редко лучшие. Вот почему люди здесь вы Google сначала? раздражать меня.
3

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

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

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

0

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

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

0

Чтобы найти этот средний цвет:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню