En determinadas situaciones puede resultar útil obtener el color dominante de una imagen, por ejemplo, si pensamos en una galería de imágenes podríamos necesitar adecuar el color de fondo de nuestro sitio según la imagen que nos encontremos visualizado.
Para obtener el color dominante de una imagen utilizando el framework jQuery podemos utilizar el plugin Adaptive Backgrounds, un plugin que se instala rápidamente y que nos permite obtener el código de color de una imagen con apenas unas lineas de código.
Obtener el color dominante de una imagen:
Primero necesitamos la imagen, el atributo data-adaptive-background indica que imágenes deben ser examinadas por el plugin:
<img src="/image.jpg" data-adaptive-background='1'>
Luego inicializamos el plugin:
$(document).ready(function(){ $.adaptiveBackground.run() });
Es muy fácil, verdad?
Además este magnifico plugin permite obtener la paleta de colores de una imagen:
$('img.my-image').on('ab-color-found', function(payload){ console.log(payload.color); // Color dominante console.log(payload.palette); // Paleta de colores });
El plugin tiene un peso de 2.7kb aproximadamente, no es pesado y puede mejorar radicalmente la forma de mostrar imágenes en nuestro sitio.
Adaptive Backgrounds se encuentra liberado bajo licencia MIT.
Lo mejor de la semana sobre desarrollo web en español vol. 36 y ¡FELIZ NAVIDAD! | ADWE
9 años ago
[…] Extraer el color dominante de una imagen con jQuery […]
Lo mejor de mi RSS del 16 al 22 de diciembre de 2013 | Noticias, tira, podcast, juegos, Linux y software libre
9 años ago
[…] Cuando aprendí a usar jQuery, nunca llegué a creer que tendría tanta potencia a cambio de tan poco esfuerzo programando: Extraer el color dominante de una imagen con jQuery – Kabytes […]