Я думаю, можно ли получить "характерный" цвет сайта. Например, TechCrunch будет зеленым, ReadWriteWeb - красным, CNN - красным, Microsoft - голубоватым, PHP - фиолетовым и т. д.
Это не должно быть точным, просто предположение.
Некоторые вещи у меня на уме:
проанализируйте все правила css и найдите тот, который соответствует большинству элементов
проанализируйте все правила css и найдите цвета фона элементов, имеющих самые большие размеры
получение фонового изображения элемента body и получение его преобладающего цвета (возможно ли это для изображения)
каким-то образом найти "заголовок" сайта (первый элемент в DOM с установленным атрибутом background css?) и получить его фон
Также мне нужен способ устранения черного, серого и белого.
Возможно ли это? У тебя есть другие идеи?
P.S. Извините за мой английский
Ваш английский не ужасен, не нужно извиняться. Я видел намного хуже. 12.01.2011
@ mjw06d Хе! Спасибо! @theChrisKent Да, я знал о веб-сайте, но он довольно прост для моих нужд. Спасибо, в любом случае. Adrian Grigore 12.01.2011
Анализ правил CSS для используемых цветов не даст вам объективного представления о том, как на самом деле выглядит и оформлен сайт. Etheryte 16.02.2014
Осуществимо, безусловно. Вы можете использовать инструмент 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 · рейтинг 2 · Alexandre Araujo Moreira
Хорошо, вот вам серьезный неортодоксальный подход:
Используйте какой-нибудь пакет для захвата экрана[1][2] для преобразования данного URL-адреса в растровое изображение (например, PNG). Проанализируйте результирующее растровое изображение, сэмплируя его пиксели для среднего значения, если вы ищете среднее значение, или задайте порог для группировки пикселей в "цветовые группы". Используя среднюю или максимальную встречаемость цветовых групп (какой метод использовать, зависит от того, что для вас важнее всего), вы можете получить довольно точное представление преобладающего цвета на странице.
Как насчет того, чтобы сделать снимок экрана и извлечь преобладающие цвета на этом изображении с помощью чего-то вроде GD lib а>?
Ответ 4 · рейтинг 1 · Etheryte
Использование 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');
});
});
