En el trabajo, hice un folleto de fotos. El texto que lo acompaña, se decidió poner el color promedio de la foto. El tema del color medio interesó, y decidí
vea qué otras opciones puede usar en el diseño.
Antecedentes
Calculamos el color promedio de la foto y establecemos el color de fondo. Ejemplo
Gradiente
El color promedio se calcula en la parte superior o inferior de la imagen y se utiliza en segundo plano para el texto. Se establece un gradiente suave entre la imagen y el sustrato. Estilo Yandex.Zen. Ejemplo
Gradiente estilo Minecraft: el color promedio se calcula en partes (franjas horizontales). Ejemplo
Marco
Al igual que una baguette en una imagen, el color promedio se calcula por separado para cada lado de la foto.
Ejemplo
Sombra
El color promedio calculado se usa para establecer el color de la sombra que cae. Ejemplo
En CSS, un elemento puede tener múltiples sombras. Para cada lado de la foto, calcule el color promedio y establezca una sombra separada. Ejemplo
Video
El ejemplo anterior se aplica en dinámica al video. Ejemplo
Divide los lados de la pantalla en una mayor cantidad de partes (30), en las que calculamos el color promedio de la sombra proyectada, al igual que Philips Ambilight . Ejemplo
Foto de texto
Rellenamos la foto con texto, debajo de cada símbolo calculamos el color promedio y lo aplicamos al símbolo. Ejemplo
Uso
El color promedio en los ejemplos se calcula usando el paquete pequeño de color rápido promedio . Al calcular el color, se tiene en cuenta la transparencia. Por defecto, se usa un algoritmo cuadrático, porque con un promedio simple, el color se vuelve más oscuro .
npm i -D fast-average-color
Ejemplos
Para obtener el color promedio de las imágenes, videos y lienzo cargados , se utiliza el método .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); </script> </body> </html>
Y para las imágenes que están en proceso de carga - .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); </script> </body> </html>
Para fotos y videos de diferentes dominios, no se olvide de CORS .
Referencias