Как получить преобладающий цвет сайта? - PullRequest
Новая
       15

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

2 голосов
/ 12 января 2011

Я думаю, возможно ли получить «характерный» цвет сайта. Например, TechCrunch будет зеленым, ReadWriteWeb будет красным, CNN также красным, Microsoft голубоватым, PHP фиолетовым и т. Д. *

Это не должно быть точным, просто лучшая догадка.

Некоторые вещи, которые у меня на уме:

  • разобрать все правила CSS и найти то, что соответствует большинству элементов
  • Разобрать все правила CSS и найти цвета фона элементов, имеющих самые большие размеры
  • получение фонового изображения элемента тела и получение его преобладающего цвета (возможно ли это для изображения)
  • как-то найти «заголовок» сайта (первый элемент в DOM с заданным атрибутом background css?) И получить его фон

Также мне нужен был бы способ устранить черных, серых и белых.

Это возможно? У вас есть другие идеи?

P.S. Извините за мой английский

Ответы [ 4 ]

5 голосов
/ 12 января 2011

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

Это на самом деле нетривиальный проект, который у вас здесь есть.

Мой подход будет следующим:

  • Скачивайте и анализируйте цвета CSS и ищите общее количество разных цветов. Если цветов всего несколько, вы, скорее всего, нашли преобладающий цвет. Это часто цвет, используемый для тегов <a> или <h1> (но не для серого или черного / белого цвета).
  • При разборе вы должны "объединить" цвета так, например, #FFEEEE совпадает с #FFEAEA, поскольку они незначительно отличаются.
  • Вам нужно привести разные цвета CSS в один и тот же формат, например, #FFF, #FFFFF, "white", rgb(255,255,255) и т. Д.
  • Для этого вам нужен набор правил и хорошее знание программирования
  • Найти преобладающие цвета на изображениях уже не так тривиально. Самый простой подход - для каждого компонента R, G и B каждого пикселя определить, какой из них является преобладающим. Если ваш пиксель имеет значения R(120), G(240), B(80), он, скорее всего, будет зеленым. Затем посчитайте это для всех пикселей и найдите преобладающий компонент.
  • @ mu слишком короткий предложил преобразовать значения в HSV и извлечь только оттенок.
  • Другой продвинутый метод будет включать создание гистограммы из трех цветовых компонентов, а затем вычисление площади под гистограммой.

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

2 голосов
/ 12 января 2011

Хорошо, вот несколько неортодоксальный подход:

Используйте некоторый пакет захвата экрана [1] [2] для рендеринга заданного URL-адреса в растровое изображение (например, PNG). Проанализируйте результирующее растровое изображение, выбирая его пиксели для среднего значения, если вы ищете среднее значение, или задайте порог для группировки пикселей в «цветовые группы». Используя среднее или максимальное вхождение цветовых групп (какой метод использовать зависит от того, что для вас наиболее важно), вы можете получить довольно точное представление о преобладающем цвете на странице.

[1] http://cutycapt.sourceforge.net/ [2] http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

1 голос
/ 16 февраля 2014

Использование Node.js, Phantomjs и Color-Thief

Зависимости: Node-canvas (что, в свою очередь, зависит от Каир ), Webshot (зависит от Phantomjs ), Color-thief , незначительные зависимости перечислены на отдельных страницах пакета.

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

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
  var file = fs.createWriteStream('google.png', {encoding: 'binary'});

  renderStream.on('data', function(data) {
    file.write(data.toString('binary'), 'binary');
  });
});

Затем вы можете перейти к передаче изображения в Color-thief, который будет извлекать для вас необходимые данные, см. Примеры проектов на странице .

1 голос
/ 12 января 2011

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

...