前言
在前端开发过程中，颜色的运用是非常重要的一环。而颜色选择的好坏也会直接影响到用户对一个网站的评价。因此，在开发过程中对颜色的处理是需要我们认真对待的。而本文所介绍的 vibrant-colour-detection 就是一款非常有用的 npm 包，可以快速地检测出图片中的主要颜色，便于我们在网站中进行颜色的选择。
准备工作
在使用 vibrant-colour-detection 之前，我们需要先完成一些准备工作。首先，我们需要安装 Node.js 环境和 npm 包管理器。这些可以通过官网下载安装包，然后根据安装指南安装即可。
安装完成后，我们可以通过以下命令来确认是否安装成功：
$ node -v $ npm -v
接下来，我们需要在项目中使用 npm 安装 vibrant-colour-detection 包。打开终端，进入项目文件夹，并输入以下命令：
$ npm install vibrant-colour-detection --save
使用教程
安装完成后，我们就可以在项目中使用 vibrant-colour-detection 包了。下面将为大家介绍如何使用该包。
首先，我们需要引入 vibrant-colour-detection 包：
const vibrant = require('vibrant-colour-detection');接下来，我们可以使用 vibrant.from() 方法来获取图片中的主要颜色。该方法接收一个图片路径或者图片的缓冲区作为参数，返回一个 Promise 对象。
vibrant.from('img/photo.jpg').getPalette()
.then((palette) => {
console.log(palette);
});在返回的 Promise 对象中，我们可以得到一个包含五种颜色的调色板 palette。这五种颜色分别是主色调（Vibrant）、亮色（LightVibrant）、暗色（DarkVibrant）、柔和颜色（Muted）、亮柔和色（LightMuted）。
下面是一个获取图片主色调的示例代码：
-- -------------------- ---- -------
----- ------- - ------------------------------------
------------------------------------------
--------------- -- -
----- ----- - -------------------------
------------------------------
--
------------ -- -
---------------------------
---在上述代码中，我们通过调用 palette.Vibrant.getHex() 方法获取到了图片的主色调，并输出了该颜色的 HEX 值。
自定义选项
除了可以获取默认的五种颜色外，我们还可以通过自定义选项来获取更多种颜色。该方法接收一个 options 对象作为参数，其属性有：
- colors: 想要获取的颜色数量，默认值为 5；
- colorSpace: 想要获取的颜色类型，默认值为 'rgb'；
- quality: 从图片中取样的质量，默认值为 5；
- filters: 用于过滤颜色的数组，例如：['red','green','blue']。
下面是一个获取六种颜色的示例代码：
-- -------------------- ---- -------
----- ------- - ------------------------------------
----- ------- - -
------- -
--
-------------------------------------------------
--------------- -- -
---------------------
--
------------ -- -
---------------------------
---总结
在本文中，我们介绍了如何使用 npm 包 vibrant-colour-detection 来获取图片中的主要颜色。通过该包，我们可以方便地进行颜色的选择和运用，提高网站的美感。
希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005749781e8991b448ea184