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 } / >
  ) ;
} 

组件参数：

参数	描述	必需的
缩略图	图片的小版本	真的
源代码	您图像的原始版本	真的
包装风格	应用于图像包装和颜色的样式对象	错误的
包装类	应用于图像和颜色包装的类	错误的