use image color

использоватьImageColor

Возьмите цветовую палитру из любого изображения, используя этот крючок.

Как это работает?

Он отображает ваше изображение на холсте, а затем генерирует палитру цветов с помощью квантования цвета.

Включает компонент изображения

Этот компонент изображения отображает цвет-заполнитель во время загрузки исходных изображений.

Перед загрузкой больших изображений (цвет изображений меньшего размера)

После загрузки больших изображений:

Живая демо-песочница:

Живая демо-версия песочницы

Как работает этот компонент изображения?

Вы должны предоставить 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 )

параметр	описание	по умолчанию
корс	Используйте КОРС. Включите это, если вы используете внешние изображения.	ЛОЖЬ
цвета	Количество цветов, которые можно взять	5
формат	Формат вывода: RGB или шестнадцатеричный	шестигранник
размер окна	Размер окна для захвата пикселей, низкие значения работают быстрее	50

Компонент:

Использование:

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

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

Параметры компонента:

параметр	описание	необходимый
миниатюра	Уменьшенная версия вашего изображения	истинный
источник	Исходная версия вашего изображения	истинный
стиль оболочки	Объект стиля для применения к оболочке изображения и цвета.	ЛОЖЬ
класс-обертка	Класс, применяемый к оболочке изображения и цвета.	ЛОЖЬ