简介
get-average-color 是一款可以获取图像中平均颜色的 npm 包，它支持从本地文件或线上图片链接获取。在前端开发中，我们经常面对需要获取或操作图像中某些特定颜色数据的情况，get-average-color 可以帮助我们轻松实现这一功能，并且包的实现方式比较简单易用，使用起来非常方便。
安装指南
使用 get-average-color 非常简单，只需要在项目中安装该包即可。
npm install get-average-color
使用教程
首先，让我们来看一下 get-average-color 的基本使用方法。
该包提供了一个 getColor 方法，我们可以调用它来获取图像的平均颜色。该方法支持从本地文件或者线上图片链接获取，方法参数如下：
getColor(path: string): Promise<string>; // path 为文件路径或线上图片链接
具体使用方法如下：
import { getColor } from 'get-average-color';
async function getAvgColor() {
const avgColor = await getColor('./image.png');
console.log(avgColor); // #F0F0F0
}
getAvgColor();上述代码会读取当前目录下的 image.png 文件，并计算出该文件图像的平均颜色。我们可以将结果打印出来，可以看到输出的是一个字符串类型的颜色值 #F0F0F0，表示图像中的平均颜色。
同样的，我们也可以从线上图片链接获取图像平均颜色，只需要将方法的参数设置为图片链接即可。
async function getRemoteAvgColor() {
const avgColor = await getColor('https://example.com/image.png');
console.log(avgColor); // #F0F0F0
}
getRemoteAvgColor();API 详解
get-average-color 提供了一些可配置参数，下面一一进行详细解释。
可选参数
sampleStep: number
- 类型：数字类型
- 默认值：10
- 描述：采样步长，建议在 5~10 之间取值
该参数表示隔多少个像素点进行颜色采样，默认值为 10，即每隔 10 个像素点计算一次颜色。该值越大，计算速度越快，但是颜色精度会越低，反之则计算速度会变慢，但颜色精度会提高。
sampleCount?: number
- 类型：数字类型
- 默认值：null
- 描述：采样个数，如果为 null，则计算所有颜色值
该参数表示需要采样多少个颜色，如果为 null，则计算所有的颜色值，这种情况下在图片较大时会影响性能。
该参数需要注意的是，配置 sampleCount 参数会将图片中的颜色进行等比例采样，而不是在整个图片均匀采样。
format?: 'rgb' | 'hex'
- 类型：枚举类型
- 默认值：'hex'
- 描述：返回的颜色值格式，支持 'rgb' 和 'hex' 两种格式
该参数表示返回的颜色值格式，如果设置参数为 'hex'，则返回一个十六进制颜色值，如果设置参数为 'rgb'，则返回一个 rgb 格式的颜色值。
示例代码
下面是一个包含上述可选参数的示例代码，以帮助大家更好地理解如何使用该包及其相关参数。
-- -------------------- ---- -------
------ - -------- - ---- --------------------
----- -------- ------------------------ -
----- -------- - ----- ----------------------- -
----------- --
------------ ---
------- ------
---
---------------------- -- -------- ---- ----
-
-------------------------总结
get-average-color 帮助我们方便地获取图像中的平均颜色，使用起来非常方便，如果需要处理图像中某些特定颜色数据，可以尝试使用该包。本文对该包做了详细的介绍和使用教程，包含了其相关参数的解释，可以帮助大家更好地理解和使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da1ed