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 또는 16진수	마녀
창크기	픽셀을 가져오는 창 크기, 낮은 값이 더 빠릅니다.	50

구성요소:

용법:

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

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

구성요소 매개변수:

매개변수	설명	필수의
미리보기 이미지	이미지의 작은 버전	진실
소스	이미지의 원본 버전	진실
래퍼 스타일	이미지 래퍼에 적용할 스타일 개체와 색상	거짓
래퍼 클래스	이미지 래퍼와 색상에 적용할 클래스	거짓