Как я могу создать палитру ярких цветов из изображения? - PullRequest
21 голосов
/ 28 апреля 2011

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

__ РЕДАКТИРОВАТЬ: __

Это то, чем я до сих пор занимался:

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

Ответы [ 6 ]

24 голосов
/ 28 апреля 2011

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

Исходное изображение:

Source

Во-первых, я бы усреднил цвета, применяя фильтр нижних частот (что-то вроде размытия по Гауссу)

enter image description here

Таким образом, вы ограничиваете общую палитру. Оттуда я разделю экран на N блоков (N - общее количество пикселей, которые вы хотите в своей палитре)

enter image description here

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

enter image description here

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

6 голосов
/ 28 апреля 2011

Сначала возьмите пиксели на картинке: (предполагается, using System.Drawing.Imaging; и using System.Runtime.InteropServices)

Bitmap b = new Bitmap(myImage);
BitmapData bd = b.LockBits(new Rectangle(0, 0, b.Width, b.Height), ImageLockMode.ReadOnly, ImageFormat.Format32Bpp);
int[] arr = new int[bd.Width * bd.Height - 1];
Marshal.Copy(bd.Scan0, arr, 0, arr.Length);
b.UnlockBits(bd);

Тогда вы можете создать свою палитру:

var distinctColors = arr.Distinct();

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

var dc = distinctColors.toArray(); // int dc[] = distinctColors.toArray() is what it used to be
int cmIndex1 = -1;
int cmIndex2 = -1;
int cmDiff = -1;
for (int i = 0; i < dc.length; i++) {
    Color c1 = Color.FromArgb(dc[i]);
    for (int j = i + 1; j < dc.length; j++) {
        Color c2 = Color.FromArgb(dc[j]);
        // Note: you might want to include alpha below
        int diff = Math.Abs(c1.R - c2.R) + Math.Abs(c1.G - c2.G) + Math.Abs(c1.B - c2.B);
        if (cmDiff < 0 || diff < cmDiff) {
            cmIndex1 = i;
            cmIndex2 = j;
            cmDiff = diff;
        }
    }
}
// Remove the colors, replace with average, repeat until you have the desired number of colors
5 голосов
/ 28 апреля 2011

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

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

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

После выбора нескольких ярких оттенков разделите пиксели этих оттенков на другую гистограмму, измеряющую насыщенность, и выделите яркие кластеры и т. Д.

Грубый пример

Приведенный ниже код делает некоторую попытку помочь определить заметные оттенки. Скорее всего, есть другие замечательные способы сделать это; однако это может дать некоторые идеи.

Во-первых, я получаю все цвета изображения в виде массива Color объектов, например:

private static Color[] GetImageData(Image image)
{
    using (var b = new Bitmap(image))
    {
        var bd = b.LockBits(new Rectangle(0, 0, b.Width, b.Height), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb);
        byte[] arr = new byte[bd.Width * bd.Height * 3];
        Color[] colors = new Color[bd.Width * bd.Height];
        Marshal.Copy(bd.Scan0, arr, 0, arr.Length);
        b.UnlockBits(bd);

        for (int i = 0; i < colors.Length; i++)
        {
            var start = i*3;
            colors[i] = Color.FromArgb(arr[start], arr[start + 1], arr[start + 2]);
        }

        return colors;
    }
}

Вы можете проверить, что я получил порядок RGB в вызове метода Color.FromArgb в правильном порядке.

Далее я отложу в сторону служебный метод для преобразования в HSV. В моем примере я буду работать только с оттенками, но вот полный рабочий пример преобразования:

private static void ColorToHSV(Color color, out int hue, out int saturation, out int value)
{
    int max = Math.Max(color.R, Math.Max(color.G, color.B));
    int min = Math.Min(color.R, Math.Min(color.G, color.B));

    hue = (int)(color.GetHue() * 256f / 360f);
    saturation = (max == 0) ? 0 : (int)(1d - (1d * min / max));
    value = (int)(max / 255d);
}

Наконец, я строю гистограмму оттенков, определяю ширину оттенков (скажем, 9 оттенков), по которой нужно объединять счетчики, а затем сообщаю счетчик на консоль.

private static void ProcessImage(Color[] imagecolors)
{
    var hues = new int[256];
    var hueclusters = new int[256];
    int hue, saturation, value;

    // build hue histogram.
    foreach (var color in imagecolors) {
        ColorToHSV(color, out hue, out saturation, out value);
        hues[hue]++;
    }

    // calculate counts for clusters of colors.
    for (int i = 0; i < 256; i++) {
        int huecluster = 0;
        for (int count = 0, j = i; count < 9; count++, j++) {
            huecluster += hues[j % 256];
        }

        hueclusters[(i + 5) % 256] = huecluster;
    }

    // Print clusters on the console
    for (int i = 0; i < 256; i++) {
        Console.WriteLine("Hue {0}, Score {1}.", i, hueclusters[i]);
    }
}

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

3 голосов
/ 09 февраля 2018

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

Сначала вы строите гистограмму цветов на изображении и их частоту.

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

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

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

3 голосов
/ 28 апреля 2011

Я начал здесь:

System.Drawing.Image img = System.Drawing.Bitmap.FromFile("file");
System.Drawing.Imaging.ColorPalette palette = img.Palette;
foreach (Color color in palette.Entries)
{
  //...
}
2 голосов
/ 07 июля 2014

Алгоритм кластеризации K-Means хорошо работает для этой проблемы. Он отлично справляется с извлечением центроидов цветовых кластеров изображения, но имейте в виду, что его недетерминированное поведение затрудняет определение фактической яркости каждого кластера.

...