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

Тема в разделе "Веб-дизайн", создана пользователем OliverGreen, 28 июл 2016.

Метки:
Модераторы: zek24
  1. OliverGreen

    OliverGreen Постоялец

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

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

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

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.383
    Симпатии:
    583
    Дайте пример?
     
  3. slowdream

    slowdream Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    10
    Симпатии:
    6
    Не совсем понял, но может это ?

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

    http://www.kennethcachia.com/background-check/
     
  4. Rattle

    Rattle Постоялец

    Регистр.:
    24 окт 2014
    Сообщения:
    60
    Симпатии:
    24
    Например:

    http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/

    [​IMG]
     
  5. paradox-ds

    paradox-ds Постоялец

    Регистр.:
    19 май 2016
    Сообщения:
    131
    Симпатии:
    17
    Пробовали устанавливать, как он вообще работает? Идея интересная, возможно где-то применить. А если на странице несколько изображенией, он вычисляет среднее значение всех цветов что ли.
     
  6. Rattle

    Rattle Постоялец

    Регистр.:
    24 окт 2014
    Сообщения:
    60
    Симпатии:
    24
    Нет, не пробовал, пока не было необходимости.

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

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

    Подробнее здесь


    Вообще работает, он же даже в примере в режиме реального времени работает :)
     
    paradox-ds нравится это.
  7. Alexandeer Belov

    Alexandeer Belov Писатель

    Регистр.:
    18 мар 2016
    Сообщения:
    5
    Симпатии:
    2
    Можно сжать изображение до 1 х 1 px, например PHP скриптом. Цвет пикселя будет "средней температурой по больнице"
     
  8. drsocol

    drsocol Создатель

    Регистр.:
    6 авг 2014
    Сообщения:
    9
    Симпатии:
    1
    Сервер сжимает в квадрат 1х1 пикс., определяет цвет в HEX. А потом по принципу https://colorscheme.ru/ строит, к примеру, триадную схему.
     
  9. schluss

    schluss Создатель

    Регистр.:
    6 дек 2016
    Сообщения:
    15
    Симпатии:
    3
    Альтернативно через imagemagick можно прогонять картинки, там одной командой вычисляется основной цвет — можно вычислить даже три основных цвета, например, если надо.

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

    dmmth Постоялец

    Регистр.:
    16 фев 2017
    Сообщения:
    57
    Симпатии:
    42
    А интересно, какой алгоритм Гугл для этого использует? Очень качественно определяет основной цвет при поиске картинок через медленный канал, сначала подгружая изображения сплошными квадратиками.