Agarrar colores destacados de una imagen-vibrante. js

Vista prévia

Descripción

vibrant.js is a JavaScript library that extracts prominent colors from an image and generates a color palette for further use.

Funcionamiento

Cargue el archivo. js vibrante en el proyecto.

<script src="dist/Vibrant.js"></script>

Extracción de colores destacados de una imagen.

var img = document.createElement('img');
img.setAttribute('src', 'examples.png')

img.addEventListener('load', function() {


var vibrant = new Vibrant(img);


var swatches = vibrant.swatches()


for (swatch in swatches)




if (swatches.hasOwnProperty(swatch) && swatches[swatch])






console.log(swatch, swatches[swatch].getHex())
});

Esto resultará en:

• Vibrant #7a4426
• Silenciado #7b9eae
• DarkVibrant #348945
• Darkmute #141414
• LightVibrant #f3ccb4

Generación de una paleta de colores a partir de la imagen utilizando el método Vibrant. Swatch () :

// Initialize a new swatch.
 // First argument needs to be an RGB array, second argument must be the swatch' population.
new Swatch()


// Get swatch color in a RGB array
.getRgb()

 // Get swatch color in hex format (#EE22DD)
.getHex()

 // Get swatch color in a HSL array
.getHsl()

 // Get population (amount of times this color was used in the original image)
.getPopulation()


// Get a color (in hex) that works best with any 'title' text that is used over this swatch's color
.getTitleTextColor()


// Get a color (in hex) that works best with any 'body' text that is used over this swatch's color
.getBodyTextColor()