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	十六進位
視窗大小	抓取像素的視窗大小，數值越低速度越快	50

組件：

用法：

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

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

組件參數：

參數	描述	必需的
縮圖	圖片的小版本	真的
原始碼	您影像的原始版本	真的
包裝風格	套用於圖像包裝和顏色的樣式對象	錯誤的
包裝類	應用於影像和顏色包裝的類	錯誤的