Подтвердить что ты не робот

Задача алгоритма: сформировать цветовую схему из изображения

Фон

Итак, я работаю над новой итерацией веб-приложения. И мы обнаружили, что наши пользователи одержимы ленивым. Действительно ленив. На самом деле, чем больше работы мы делаем для них, тем больше они любят услугу. Часть существующего приложения требует от пользователя выбора цветовой схемы для использования. Однако у нас есть изображение (скриншот веб-сайта пользователя), поэтому почему мы не можем просто насытить их лень и сделать это за них? Ответ: Мы можем, и это будет забавное программирование!:)

Задача

Для изображения, как вы создаете соответствующую цветовую схему? Другими словами, как вы выбираете основные цвета X в изображении (где X определяется веб-приложением). Изображение, используемое в нашей конкретной ситуации, представляет собой скриншот веб-сайта пользователя, сделанного с полным разрешением (например, 1280x1024). (Примечание. Пожалуйста, просто опишите свой алгоритм - нет необходимости публиковать фактический псевдокод.)

Бонусные баллы (очки уличного кредита, а не фактические точки ТО) для:

  • Описание простого, но эффективного алгоритма. Код - это то, как мы создаем - сохраняем его простым и красивым.
  • Позволяет пользователю настраивать цветовую схему в соответствии с различными "настроениями", такими как "Цветной", "Яркий", "Приглушенный", "Глубокий" и т.д. (a la Kuler)
  • Описание метода надежного определения основного цвета текста, используемого на скриншоте веб-сайта (скорее всего, потребуется его собственное, отдельное, algo).

Вдохновение

Существует несколько существующих сайтов, которые выполняют аналогичную функцию. Не стесняйтесь проверить их и спросить себя: "Как я буду дублировать это? Как я мог улучшить его?"

4b9b3361

Ответ 1

  • Чтобы найти основные цвета X, просмотрите приложение. Запустите цветную гистограмму на изображении. Главными цветами X в гистограмме являются тема. Изменить: если используются градиенты, вам нужно выбрать различные "пики" цветов; то есть у вас может быть целая куча цветов прямо вокруг "оранжевого", если оранжевый цвет является одним из основных цветов, используемых в градиентах. Эффективно просто навязывайте определенное расстояние между вашими цветами, выбранными из гистограммы.

  • Тонкая настройка цветовой схемы лучше всего сделать в пространстве HSV; конвертируйте ваши цвета в пространство HSV, и если пользователи хотят, чтобы он был "ярче", увеличьте значение, если они хотят, чтобы он был более "цветным", увеличивал насыщенность и т.д.

  • Определение цвета текста лучше всего сделать, характеризуя области высокой изменчивости (высокая частота в пространстве Фурье). В этих областях вы должны иметь либо: два цвета, текст и фон, и в этом случае ваш текст является меньшим цветом; или у вас будет несколько цветов, текста и цветов фонового изображения, и в этом случае цвет текста является наиболее распространенным цветом.

Ответ 2

Я делаю это, чтобы найти палитру, используемую для изображений (художественных работ).

  • Я начинаю с imagemagick и изменяю размер большого изображения до рабочего размера (т.е. 400 пикселей по самому большому размеру). Это фактически помогает преобразовывать тонкие локальные цветовые различия в меньшее количество пикселей со средним значением этих цветов.

  • Прокручивайте каждый пиксель, присутствующий в измененном изображении, считывая значения RGB для каждого пикселя, преобразуйте RGB в HSB и сохраните значения HSB в массив.

  • Для каждого найденного цвета пикселя я затем разделяю диапазон оттенков (0,255) на 16, диапазон насыщения (0,100) на 10 и диапазон яркости (0,100) на 10. Ради раунда результат вверх или вниз целое число. Это помогает группировать пиксели в категории похожих цветов.

    Итак, пиксель с HSB 223,64,76 будет в категории 14,6,8

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

    Выберите, чтобы разделить HSB на более мелкие деления, если вам нужна лучшая репликация цветов из категорий. то есть. разделите каждый H, S, B на 8,5,5 вместо 16,10,10.

  • Подсчитайте наиболее распространенные цветовые категории, сортировку и отображение. Я отбрасываю цветовые категории с очень небольшим количеством пикселей.

Примечание. Это действительно предназначено для произведений искусства, которые имеют очень мало пикселей с одинаковыми значениями цвета (например, с тенями и градиентами.)

По большей части на странице HTML, возможно, больше пикселей, которые точно соответствуют определенному значению цвета (например, цвет фона, цвет текста и т.д. все будут одинакового цвета, если они появляются).

Ответ 3

Вы можете взглянуть на:

https://github.com/dcollien/Dreamcoat

который делает это в CoffeeScript (грамотный кофе, поэтому он хорошо документирован)

Демо здесь: http://dcollien.github.io/Dreamcoat/test.html

Он имеет как подход квантования цвета, так и подход KMeans, который объединен.

Ответ 4

  • Разделите изображение экрана на сетку из прямоугольников r-много, в n по m "сетке", каждая с шириной (общая ширина /n ) и высотой (общая высота/м).

    1а. Назначьте вес высокопрофильным областям экрана, например, левая область.

    1b. Для каждого прямоугольника назначьте пиксели в пространство (цвет, частота)

  • Для каждого прямоугольника R, распределения частоты f_R и веса W_R:

    2а. Определите цвет i-й схемы (например, я = 1 ↔ цвет фона) путем сканирования "верхней частоты", "второй частоты" (то есть f_R [i,:]) для каждого блока.

    2b. Для каждого я поместите его в таблицу оценки (color_i, score), где score = f_R [i, "frequency" ] * W_R

    2в. Лучшим бомбардиром для каждого я будет i-й цвет схемы.

Теоретически, если у вас много "синего на белом" или "красного на черном", вы должны получить белый первичный, синий вторичный или черный первичный, красный вторичный, например.

Для вашего цвета текста, либо основывайте это непосредственно на вычислении фонового цвета, либо выберите вторичный цвет, и если разность V HSV слишком низкая, установите цвет с вычисленного цвета схемы, но увеличьте значение V значение.

псевдокод:

float[][] weights = 
    { { 1.0, 3.0, 5.0, 5.0, 3.0, 1.0, 1.0, 1.0, 1.0 },
      { 2.0, 6.0, 7.0, 7.0, 6.0, 2.0, 3.0, 3.0, 2.0 },
      { 2.0, 8.0, 9.0, 9.0, 7.0, 3.0, 6.0, 6.0, 3.0 },
      { 2.0, 8.0, 9.0, 9.0, 7.0, 2.0, 3.0, 3.0, 2.0 },
      { 2.0, 7.0, 9.0, 9.0, 7.0, 2.0, 1.0, 1.0, 1.0 },
      { 2.0, 6.0, 7.0, 7.0, 6.0, 2.0, 3.0, 3.0, 1.0 },
      { 1.0, 3.0, 5.0, 5.0, 3.0, 2.0, 6.0, 6.0, 2.0 },
      { 1.0, 1.0, 2.0, 2.0, 1.0, 2.0, 6.0, 6.0, 2.0 },
      { 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 3.0, 3.0, 1.0 } };

// Leave the following implementations to the imagination:
void DivideImageIntoRegions( Image originalImage, out Image[][] regions );
void GetNthMostCommonColorInRegion( Image region, int n, out Color color );
TKey FindMaximum<TKey, TValue>( Map<TKey, TValue> map );

// The method:
Color[] GetPrimaryScheme( Image image, int ncolors, int M = 9, int N = 9 )
{
    Color[] scheme = new Color[ncolors];
    Image[][] regions = new Image[M][N];

    DivideImageIntoRegions( image, regions );

    for( int i = 0; i < ncolors; i++ )
    {
        Map<Color, float> colorScores = new Map<Color, float>();

        for( int m = 0; m < M; m++ )
        for( int n = 0; n < N; n++ )
        {
            Color theColor;
            GetNthMostCommonColorInRegion( region, i, theColor );

            if( colorScores[theColor] == null )
            { colorScores[theColor] = 0; }

            colorScores[theColor] += weights[m][n];
        }

        scheme[i] = FindMaximum( colorScores );
    }

    return scheme;
}

Взглянув на вышеизложенное, ясно, что если есть область с небольшой изменчивостью, она будет иметь тот же самый второй цвет, что и наиболее распространенный цвет. Чтобы настроить, второй наиболее распространенный цвет в таком случае может быть нулевым, что можно было бы защитить от:

            if( theColor != null )
                continue;

            if( colorScores[theColor] == null )
            { colorScores[theColor] = 0; }

            colorScores[theColor] += weights[m][n];
        }

Ответ 5

Цветовое квантование - это тот же процесс, который используется для выбора палитры для низкокачественных GIF. Чтобы получить цветовую палитру с фотографического изображения, я использовал Nick Rabinowitz quantize.js, который основан на Leptonicas MMCQ (модифицированное срединное квантование среза).

meemoo screen shotЖивое веб-приложение, .

Ответ 7

Уже есть много хорошего предложения о том, как найти основные цвета, и я бы попробовал подобные подходы. Для нахождения цвета текста у меня есть другое предложение.

Вычислите гистограмму для каждой строки изображения сверху вниз. Каждый раз, когда вы достигаете базовой линии линии, должно быть сильное падение частоты цвета текста. Частота будет оставаться низкой до тех пор, пока вы не достигнете верхних букв следующей строки, следуя второму шагу, когда вы достигнете строчных букв.

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

Ответ 8

Как и решение McWafflestix, специфика должна быть изменена, но мой общий подход будет...

(я согласен, что HSV - это правое пространство)

  • Возьмите гистограмму изображения, отфильтруйте его, чтобы сгладить шум, и найдите наивысший балл, где V и S находятся в (возможно динамической) гамме возможных "сюжетных" цветов. Красная птица на голубом небе потребует, чтобы мы были достаточно умны, чтобы не основывать нашу схему на синем, а на красном. Это может потребовать некоторых догадок о составе фотографии, например, "сосредоточено в кадре" и "правиле третьего" анализа может дать вам вероятность того, что цвет будет актуальным. Несмотря на это, это наш базовый цвет.

  • По линии Кулера вычислите цвета, которые дополняют базу, перемещая колесо цвета. Дополнительные баллы за расчетный комплимент, если он также заметно отображался на гистограмме с шага 1.

  • Используйте базовый цвет и подсчитанные комплименты для получения приятных дополнительных цветов, таких как более легкие и темные версии каждого, более или менее насыщенные и т.д.

Ответ 9

Я немного опаздываю на это, но я бы выполнил карту Kohonen (http://en.wikipedia.org/wiki/Self-organizing_map) в трехмерном цветовом пространстве. Количество точек на карте будет количеством различных цветов, которые вы хотели для своей палитры, а затем обучите карту, используя все пиксели изображения. Я не пробовал это сам, но я уверен, что кто-то еще об этом уже подумал.

Ответ 10

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

Во-первых, вставьте/зарисуйте пиксели в некотором цветовом пространстве. Это может быть RGB, HSL или другое цветовое пространство. Для генерации цветовой схемы вы можете использовать одну из следующих функций:

  • Создание гистограммы цветового пространства. Это включает разделение пространства на сетку и подсчет пикселей в каждой ячейке сетки. Выберите верхние N-ячейки (гистограммы) с наибольшим количеством пикселей и усредняйте пиксели в каждом, чтобы создать цвет на ячейку. Это может быть ваша цветовая схема.

  • Median Cut или какой-либо другой метод разбиения пространства - это хорошее улучшение по сравнению С# 1, поскольку оно будет разделять пространство, просматривая данные.

  • Кластеризация пикселей - группировка пикселей в группы с использованием одной из многих методов кластеризации (k-средство, среднее смещение и т.д.). Затем усредняйте пиксели в каждой группе для создания цветовой схемы.

Я написал более подробный отчет по трем приведенным выше подходам здесь

Я также написал интерактивное веб-приложение которое позволяет загружать изображение, создающее создание цветовой палитры, используя один из трех вышеуказанных подходов, Вы можете найти код для него на github

Ответ 11

Среднее значение оттенка, насыщенности и яркости сохраняется при сохранении значений min/max.

Заблокировать целевой оттенок всех цветов в среднем и интерполировать насыщенность и яркость для x точек между границами. Это должно вернуть схему с цветом, отличным от фото, но с простым изменением. Возможно, вы даже взглянете на Apple.

Просто надейтесь, что вы не получите 3 оттенка собачьей магии.