use image color

useImageColor

Mit diesem Hook können Sie die Farbpalette eines beliebigen Bildes abrufen

Wie funktioniert es?

Es rendert Ihr Bild auf einer Leinwand und generiert dann mithilfe der Farbquantisierung seine Farbpalette.

Enthält eine Bildkomponente

Diese Bildkomponente rendert eine Platzhalterfarbe, während Ihre Originalbilder geladen werden.

Vor dem Laden großer Bilder (Farbe aus kleineren Bildern)

Nach dem Laden großer Bilder:

Live-Sandbox-Demo:

Live-Sandbox-Demo

Wie funktioniert diese Bildkomponente?

Sie müssen src (Ihr Originalbild) und ein Miniaturbild (kleineres Bild) angeben. Sobald das Miniaturbild geladen wird, wird das Skelett in seiner dominanten Farbe sichtbar. In der Zwischenzeit wird Ihr Originalbild weiter geladen. Wenn Ihr Originalbild schließlich eintrifft, ersetzt es das Skelett.

Installation:

npm install use-image-color

Der Haken:

Verwendung:

 import useImageColor from 'use-image-color'

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

Hook-Parameter:

 useImageColor ( url : String , options : OptionsObject )

param	Beschreibung	Standard
kors	Verwenden Sie CORS. Aktivieren Sie dies, wenn Sie externe Bilder verwenden	FALSCH
Farben	Anzahl der zu greifenden Farben	5
Format	Ausgabeformat: RGB oder Hex	verhexen
Fenstergröße	Größe des Fensters zum Erfassen von Pixeln, niedrige Werte sind schneller	50

Die Komponente:

Verwendung:

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

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

Komponentenparameter:

param	Beschreibung	erforderlich
Miniaturansicht	Kleine Version Ihres Bildes	WAHR
src	Originalversion Ihres Bildes	WAHR
WrapperStyle	Stilobjekt, das auf den Wrapper des Bildes und die Farbe angewendet werden soll	FALSCH
WrapperClass	Klasse, die auf den Wrapper des Bildes und die Farbe angewendet werden soll	FALSCH