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

Fruit average color

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

Фон

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

Градиент

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

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

Рамка

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

Тень

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

В CSS у элемента можно задать несколько теней. Для каждой из сторон фотографии вычислим средний цвет и установим отдельную тень. Пример ^[6]
^[6]

Видео

Предыдущий пример применим в динамике для видео. Пример ^[7]
^[7]

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

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

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

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

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

npm i -D fast-average-color

Примеры

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

<html>
<body>
    ...
    <div class="image-container">
        <img src="image.png" />
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script>
    <script>
        window.addEventListener('load', function() {
            var
                fac = new FastAverageColor(),
                container = document.querySelector('.image-container'),
                color = fac.getColor(container.querySelector('img'));

            container.style.backgroundColor = color.rgba;
            container.style.color = color.isDark ? '#fff' : '#000';

            console.log(color);
            // {
            //     error: null,
            //     rgb: 'rgb(255, 0, 0)',
            //     rgba: 'rgba(255, 0, 0, 1)',
            //     hex: '#ff0000',
            //     hexa: '#ff0000ff',
            //     value: [255, 0, 0, 255],
            //     isDark: true,
            //     isLight: false
            // }
        }, false);
    </script>
</body>
</html>

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

<html>
<body>
    ...
    <div class="image-container">
        <img src="image.png" />
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script>
    <script>
        var
            fac = new FastAverageColor(),
            container = document.querySelector('.image-container');

        fac.getColorAsync(container.querySelector('img'), function(color) {
            container.style.backgroundColor = color.rgba;
            container.style.color = color.isDark ? '#fff' : '#000';

            console.log(color);
            // {
            //     error: null,
            //     rgb: 'rgb(255, 0, 0)',
            //     rgba: 'rgba(255, 0, 0, 1)',
            //     hex: '#ff0000',
            //     hexa: '#ff0000ff',
            //     value: [255, 0, 0, 255],
            //     isDark: true,
            //     isLight: false
            // }
        });
    </script>
</body>
</html>

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

Ссылки:

Автор: Денис Селезнёв

Источник ^[18]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/288290

Ссылки в тексте:

[1] Пример: https://fast-average-color.github.io/examples/background.html

[2] Пример: https://fast-average-color.github.io/examples/gradient.html

[3] Пример: https://fast-average-color.github.io/examples/gradient_stripes.html

[4] Пример: https://fast-average-color.github.io/examples/border.html

[5] Пример: https://fast-average-color.github.io/examples/box-shadow.html

[6] Пример: https://fast-average-color.github.io/examples/box-shadow-4-sides.html

[7] Пример: https://fast-average-color.github.io/examples/ambilight.html#4Sides

[8] Philips Ambilight: https://ru.wikipedia.org/wiki/Ambilight

[9] Пример: https://fast-average-color.github.io/examples/ambilight.html#ManyPoints

[10] Пример: https://fast-average-color.github.io/examples/text-photo.html

[11] fast-average-color: https://github.com/hcodes/fast-average-color

[12] более тёмным: https://fast-average-color.github.io/compare/

[13] .getColor(): https://github.com/fast-average-color/fast-average-color#getcolorresource-options

[14] .getColorAsync(): https://github.com/fast-average-color/fast-average-color#getcolorasyncresource-callback-options

[15] CORS: https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

[16] Репозиторий на Github: https://github.com/fast-average-color/fast-average-color

[17] Пакет в npm: https://www.npmjs.com/package/fast-average-color

[18] Источник: https://habr.com/post/419309/?utm_source=habrahabr&utm_medium=rss&utm_campaign=419309

Нажмите здесь для печати.