use image color

utiliserImageColor

Récupérez la palette de couleurs de n'importe quelle image à l'aide de ce crochet

Comment ça marche ?

Il restitue votre image sur une toile, puis génère sa palette de couleurs à l'aide de la quantification des couleurs.

Comprend un composant d'image

Ce composant d'image restitue une couleur d'espace réservé pendant le chargement de vos images originales.

Avant de charger de grandes images (couleur à partir d'images plus petites)

Après avoir chargé de grandes images :

Démo Sandbox en direct :

Démo Sandbox en direct

Comment fonctionne ce composant d'image ?

Vous devez fournir src (votre image originale) et une vignette (image plus petite). Dès que la vignette est chargée, le squelette devient visible grâce à sa couleur dominante. Pendant ce temps, votre image originale continue de se charger, enfin, lorsque votre image originale arrive, elle remplace le squelette.

Installation:

npm install use-image-color

Le crochet :

Usage:

 import useImageColor from 'use-image-color'

export function Card ( ) {
  const { colors } = useImageColor ( url , { cors : true , colors : 5 } )
  return ( ... ) ;
} 

Paramètres du crochet :

 useImageColor ( url : String , options : OptionsObject )

paramètre	description	défaut
cors	Utilisez CORS. Activez ceci si vous utilisez des images externes	FAUX
couleurs	Nombre de couleurs à saisir	5
format	Format de sortie : RVB ou hexadécimal	hexadécimal
Taille de la fenêtre	Taille de la fenêtre pour saisir les pixels, les valeurs faibles sont plus rapides	50

Le composant :

Usage:

 import { Image } from 'use-image-color'

export function Card ( ) {
  return (
    < Image src = { url } thumbnail = { thumbnail } / >
  ) ;
} 

Paramètres du composant :

paramètre	description	requis
vignette	Petite version de votre image	vrai
src	Version originale de votre image	vrai
style d'emballage	Objet de style à appliquer au wrapper de l'image et à la couleur	FAUX
wrapperClass	Classe à appliquer au wrapper de l'image et à la couleur	FAUX