use image color

utilizarImageColor

Toma la paleta de colores de cualquier imagen usando este gancho

¿Cómo funciona?

Representa su imagen en un lienzo y luego genera su paleta de colores mediante la cuantificación de color.

Incluye componente de imagen

Este componente de imagen genera un color de marcador de posición mientras se cargan las imágenes originales.

Antes de cargar imágenes grandes (color de imágenes más pequeñas)

Después de cargar imágenes grandes:

Demostración de Sandbox en vivo:

Demostración en vivo de la zona de pruebas

¿Cómo funciona este componente de imagen?

Debes proporcionar src (tu imagen original) y una miniatura (imagen más pequeña). Tan pronto como se carga la miniatura, el esqueleto se vuelve visible usando su color dominante. Mientras tanto, tu imagen original continúa cargándose, finalmente, cuando llega tu imagen original, reemplaza el esqueleto.

Instalación:

npm install use-image-color

El gancho:

Uso:

 import useImageColor from 'use-image-color'

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

Parámetros de gancho:

 useImageColor ( url : String , options : OptionsObject )

parámetro	descripción	por defecto
cors	Utilice CORS. Habilite esto si está utilizando imágenes externas.	FALSO
bandera	Número de colores para agarrar	5
formato	Formato de salida: rgb o hexadecimal	maleficio
tamaño de ventana	Tamaño de ventana para capturar píxeles, los valores bajos son más rápidos	50

El componente:

Uso:

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

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

Parámetros de los componentes:

parámetro	descripción	requerido
uña del pulgar	Versión pequeña de tu imagen.	verdadero
src	Versión original de tu imagen.	verdadero
estilo envoltorio	Objeto de estilo para aplicar al envoltorio de la imagen y el color.	FALSO
clase de envoltura	Clase para aplicar al wrapper de la imagen y al color.	FALSO