Средний цвет в JavaScript

Fruit average color

По работе делал листалку фотографий. Сопровождающий текст было решено положить на усреднённый цвет фото. Тема среднего цвета заинтересовала, и я решил
посмотреть какие ещё варианты можно использовать в верстке.


Фон

Рассчитываем средний цвет фотографии и устанавливаем цвет подложки. Пример
Background


Градиент

Средний цвет высчитывается у верхней или нижней части картинки и используется в подложке для текста. Между картинкой и подложкой установлен плавный градиент. Стиль Яндекс.Дзена. Пример
Gradient

Градиент в стиле Minecraft — средний цвет высчитывается частями (горизональными полосками). Пример
Minecraft gradient


Рамка

Как багет у картины, средний цвет высчитывается отдельно у каждой из сторон фотографии.
Пример
Border


Тень

Вычисленный средний цвет используется в задании цвета падающей тени. Пример
Box shadow

В CSS у элемента можно задать несколько теней. Для каждой из сторон фотографии вычислим средний цвет и установим отдельную тень. Пример
Box shadow, 4 sides


Видео

Предыдущий пример применим в динамике для видео. Пример
Video, box shadow, 4 sides

Разделим стороны экрана на большее количество частей (30), в которых вычислим средний цвет для отбрасываемой тени, совсем как у Philips Ambilight. Пример
Video, Ambilight


Текстовая фотография

Фотографию заполняем текстом, под каждым символом вычисляем средний цвет и применяем его к символу. Пример
Text photo


Использование

Средний цвет в примерах вычисляется с помощью небольшого пакета «fast-average-color». При подсчёте цвета учитывается прозрачность. По умолчанию используется квадратичный алгоритм, т.к. при простом усреднении цвет становится более тёмным.

npm i -D fast-average-color


Примеры

Для получения среднего цвета из загруженных картинок, видео и canvas«a используется метод .getColor ():



    ...
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

А для картинок, которые находятся в процессе загрузки — .getColorAsync ():



    ...
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Для картинок и видео с разных доменов стоит не забывать про CORS.

Ссылки:


© Habrahabr.ru