По роботі робив листалку фотографій. Супроводжуючий текст було вирішено покласти на усереднений колір фото. Тема середнього кольору зацікавила, і я вирішив
подивитися які ще варіанти можна використовувати у верстці.
Фон
Розраховуємо середній колір фотографії та встановлюємо колір підкладки. Приклад
Градієнт
Середній колір вираховується у верхній або нижній частині картинки і використовується в підкладці для тексту. Між картинкою і підкладкою встановлений плавний градієнт. Стиль Яндекс.Дзена. Приклад
Градієнт в стилі 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
- Приклади
