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.