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

Question

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

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

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

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

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

Возможно ли это? У тебя есть другие идеи?

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

Answer 1

Возможно, определенно. Вы можете использовать инструмент 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 is too short предложил преобразовать значения в HSV и извлечь только оттенок.
• Другим передовым методом будет создание гистограммы трех компонентов цвета, а затем вычисление области под гистограммой.

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

Answer 2

Ok, вот приходит какой-то серьезно неординарный подход:

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

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

Answer 3

Что о взятии экрана и извлечения преобладающие цвета в этом изображении с чем-то вроде GD lib?

Answer 4

Использование Node.js, Phantomjs и цвет-Вор

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

Веб-камера представляет собой легкую обертку вокруг безголового Webkit Phantomjs.
Вы можете использовать его, чтобы сделать снимок экрана своей страницы и сохранить его в потоке, пример кода ниже from the project 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-вора, который будет извлекать необходимые данные для вас, see the project samples page for examples.