use image color

useImageColor

Pegue a paleta de cores de qualquer imagem usando este gancho

Como funciona?

Ele renderiza sua imagem em uma tela e depois gera sua paleta de cores usando quantização de cores.

Inclui componente de imagem

Este componente de imagem renderiza uma cor de espaço reservado enquanto as imagens originais são carregadas.

Antes de carregar imagens grandes (cores de imagens menores)

Depois de carregar imagens grandes:

Demonstração do Sandbox ao vivo:

Demonstração de sandbox ao vivo

Como funciona esse componente de imagem?

Você deve fornecer src (sua imagem original) e uma miniatura (imagem menor). Assim que a miniatura é carregada, o esqueleto se torna visível usando sua cor dominante. Enquanto isso, sua imagem original continua carregando; finalmente, quando sua imagem original chega, ela substitui o esqueleto.

Instalação:

npm install use-image-color

O 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	descrição	padrão
corpo	Utilize o CORS. Habilite isto se você estiver usando imagens externas	falso
cores	Número de cores para pegar	5
formatar	Formato de saída: rgb ou hexadecimal	hexadecimal
tamanho da janela	Tamanho da janela para capturar pixels, valores baixos são mais rápidos	50

O componente:

Uso:

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

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

Parâmetros do componente:

parâmetro	descrição	obrigatório
miniatura	Versão pequena da sua imagem	verdadeiro
fonte	Versão original da sua imagem	verdadeiro
estilo wrapper	Objeto de estilo a ser aplicado ao wrapper da imagem e à cor	falso
classe wrapper	Classe a ser aplicada ao wrapper da imagem e à cor	falso