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

[OliverGreen]

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

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

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

 

[ZiX]

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

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

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

Дайте пример?

 

[slowdream]

Не совсем понял, но может это ?

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

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

 

[Rattle]

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

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

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

Например:

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

Спойлер: Скриншот

 

[paradox-ds]

Например:

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

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

 

[Rattle]

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

Нет, не пробовал, пока не было необходимости.

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

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

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


Вообще работает, он же даже в примере в режиме реального времени работает

 

[Alexandeer Belov]

Можно сжать изображение до 1 х 1 px, например PHP скриптом. Цвет пикселя будет "средней температурой по больнице"

 

[drsocol]

Можно сжать изображение до 1 х 1 px, например PHP скриптом. Цвет пикселя будет "средней температурой по больнице"

Сервер сжимает в квадрат 1х1 пикс., определяет цвет в HEX. А потом по принципу Для просмотра ссылки Войди или Зарегистрируйся строит, к примеру, триадную схему.

 

[schluss]

Альтернативно через imagemagick можно прогонять картинки, там одной командой вычисляется основной цвет — можно вычислить даже три основных цвета, например, если надо.

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

 

[dmmth]

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