use image color

画像の色を使用する

このフックを使用して任意の画像からカラー パレットを取得します

どのように機能するのでしょうか?

画像をキャンバス上にレンダリングし、カラー量子化を使用してカラー パレットを生成します。

画像コンポーネントを含む

この画像コンポーネントは、元の画像の読み込み中にプレースホルダーの色をレンダリングします。

大きな画像を読み込む前（小さな画像からカラー）

大きな画像をロードした後:

ライブサンドボックスデモ:

ライブサンドボックスデモ

この画像コンポーネントはどのように機能するのでしょうか?

src (元の画像) とサムネイル (小さい画像) を提供する必要があります。サムネイルがロードされるとすぐに、スケルトンがその主要な色を使用して表示されます。その間、元の画像は読み込みを続け、最終的に元の画像が到着すると、スケルトンが置き換えられます。

インストール:

npm install use-image-color

フック:

使用法：

 import useImageColor from 'use-image-color'

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

フックパラメータ:

 useImageColor ( url : String , options : OptionsObject )

パラメータ	説明	デフォルト
コルス	CORS を使用します。外部画像を使用している場合はこれを有効にします	間違い
色	取得する色の数	5
形式	出力形式: rgb または hex	16進数
ウィンドウサイズ	ピクセルを取得するウィンドウのサイズ、低い値の方が高速です	50

コンポーネント:

使用法：

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

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

コンポーネントパラメータ:

パラメータ	説明	必須
サムネイル	画像の小さいバージョン	真実
送信元	画像の元のバージョン	真実
ラッパースタイル	画像と色のラッパーに適用するスタイルオブジェクト	間違い
ラッパークラス	画像と色のラッパーに適用するクラス	間違い