Розробка

Середній колір JavaScript

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

Фон

Розраховуємо середній колір фотографії та встановлюємо колір підкладки. Приклад

Градієнт

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

Градієнт в стилі Minecraft — середній колір вираховується частинами (горизональными смужками). Приклад

Рамка

Як багет у картини, середній колір вираховується окремо у кожної із сторін фотографії.
Приклад

Тінь

Обчислений середній колір використовується в завданні кольору падаючої тіні. Приклад

В CSS у елемента можна задати кілька тіней. Для кожної з сторін фотографії обчислимо середній колір і встановимо окрему тінь. Приклад

Відео

Попередній приклад застосуємо в динаміці для відео. Приклад

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

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

Фотографію заповнюємо текстом, під кожним символом обчислюємо середній колір і застосовуємо його до символу. Приклад

Використання

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

npm i -D fast-average-color

Приклади

Для отримання середнього кольору з завантажених картинок, відео і canvas’a використовується метод .getColor():

<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():

<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.

Посилання:

  • Репозиторій на Github
  • Пакет npm
  • Приклади

Related Articles

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Close