Определение основного цвета изображения

OliverGreen

Постоялец
Регистрация
19 Сен 2008
Сообщения
123
Реакции
18
Всем здравствуйте!
Недавно в магазине WP (и не только там) заметил, что блоки в котором размещаются лого и описание софта принимают некий цвет превалирующий на вышеупомянутом логотипе.

Хотелось бы узнать у тех, кто в курсе, что это за технология (серверная, клиентская), можно ли ее прикрутить к своему сайту?

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

Хотелось бы узнать у тех, кто в курсе, что это за технология (серверная, клиентская), можно ли ее прикрутить к своему сайту?

Уж больно интересно.
Дайте пример?
 
Не совсем понял, но может это ?

BackgroundCheck — jQuery-плагин, который в зависимости от цвета фона меняет цвет элемента на более светлый или тёмный.

Для просмотра ссылки Войди или Зарегистрируйся
 
Всем здравствуйте!
Недавно в магазине WP (и не только там) заметил, что блоки в котором размещаются лого и описание софта принимают некий цвет превалирующий на вышеупомянутом логотипе.

Хотелось бы узнать у тех, кто в курсе, что это за технология (серверная, клиентская), можно ли ее прикрутить к своему сайту?

Уж больно интересно.

Например:

Для просмотра ссылки Войди или Зарегистрируйся

UwHLC5.png
 
Например:

Для просмотра ссылки Войди или Зарегистрируйся
Пробовали устанавливать, как он вообще работает? Идея интересная, возможно где-то применить. А если на странице несколько изображенией, он вычисляет среднее значение всех цветов что ли.
 
Пробовали устанавливать, как он вообще работает? Идея интересная, возможно где-то применить. А если на странице несколько изображенией, он вычисляет среднее значение всех цветов что ли.
Нет, не пробовал, пока не было необходимости.

Фон применяется к родительскому блоку, в котором в качестве фона выставлено изображение. Для этого достаточно применить класс data-ab-css-background к элементу. Например:

HTML:
<div style='background-image: url(/some-image.jpg)' data-adaptive-background data-ab-css-background></div>


Для просмотра ссылки Войди или Зарегистрируйся


Вообще работает, он же даже в примере в режиме реального времени работает :)
 
Можно сжать изображение до 1 х 1 px, например PHP скриптом. Цвет пикселя будет "средней температурой по больнице"
 
Можно сжать изображение до 1 х 1 px, например PHP скриптом. Цвет пикселя будет "средней температурой по больнице"
Сервер сжимает в квадрат 1х1 пикс., определяет цвет в HEX. А потом по принципу Для просмотра ссылки Войди или Зарегистрируйся строит, к примеру, триадную схему.
 
Альтернативно через imagemagick можно прогонять картинки, там одной командой вычисляется основной цвет — можно вычислить даже три основных цвета, например, если надо.

Правда тут понадобится либо датабаза значений, либо записывать значения в метаданные файла и потом на фронтэнде уже яваскриптом их оттуда доставать.
 
А интересно, какой алгоритм Гугл для этого использует? Очень качественно определяет основной цвет при поиске картинок через медленный канал, сначала подгружая изображения сплошными квадратиками.
 
Назад
Сверху