
Vibrant.js: Detecta los colores predominantes de una imagen con javascript
Vibrant.js es una librería javascript
basada en la clase Palette de la librería de soporte de Android y como el título lo indica, te permite obtener los colores predominantes de cualquier imagen, e incluso te indica el color óptimo para usarse en el texto que se coloque en un fondo con el color obtenido.
Nota: La imagen debe encontrarse en el mismo dominio o usar el código
base64
, de lo contrario marcará un error.
Modo de uso
Primero debes integrar la librería en tu documento HTML la cual puedes descargar aquí o seguir las instrucciones de la página para instalarla usando npm
y coffeeScript
.
... <script src="path/to/vibrant.js"></script> <body>
Una vez integrada la librería, solo necesitas instanciar un nuevo objeto Vibrant
pasando como parámetro el elemento del DOM
de la imagen que deseas procesar y ejecutar la función swatches()
, con la cual obtendrás un arreglo con hasta 6 distintos colores: Vibrant, Mutted, DarkVibrant, DarkMutted, LightVibrant y LightMutted
.
<script src="path/to/vibrant.js"></script> <script> var img = document.querySelector('#my_image'), colorsReady = false; // Asegurate de ejecutar la función solo cuando la imagen ya ha sido leida. img.addEventListener('load', functon(){ if (!colorsReady) { getColors(); } }); if (!colorsReady) { getColors(); } function getColors() { colorsReady = true; var vibrant = new Vibrant(img), swatches = vibrant.swatches(), vibrantColor = swatches['Vibrant'], // ['Vibrant', 'Mutted', ...] // swatches; // Regresa el color en RGB rgb = vibrantColor.getRgb(), // Regresa el color en hexadecimal hex = vibrantColor.getHex(), // Regresa el color en HSL hsl = vibrantColor.getHsl(), // Regresa la cantidad de veces que el color aparece en la imagen procesada population = vibrantColor.getPopulation(), // Regresa el color recomendado para títulos sobre este color titleColor = vibrantColor.getTitleTextColor(), // Regresa el color recomendado para párrafos sobre este color bodyColor = vibrantColor.getBodyTextColor(); } </script>
Demo
Te comparto el ejemplo que usé para crear la imagen de la portada.