Merida Design Blog

Publicado el | Recursos /

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.


Página: http://jariz.github.io/vibrant.js/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: