vibrant.js 是一个基于 JavaScript 的颜色提取工具，可以从任何图像中提取主要的颜色。它可以作为一个独立的库使用，也可以和其他 JavaScript 框架（如 React 和 Vue）一起使用。在这篇文章中，我们将着重介绍如何安装、配置和使用 vibrant.js。
安装
你可以通过 npm 或者 yarn 来安装 vibrant.js。在终端中输入以下命令：
npm install vibrant --save
或者
yarn add vibrant
这将会把 vibrant.js 安装到你的项目中，并且把它添加到你的 package.json 文件中。
配置
在使用 vibrant.js 之前，你需要先加载它。你可以在你的 HTML 文件中引入它：
<script src="path/to/vibrant.js"></script>
另外，你还需要创建一个图片对象，并调用 Vibrant.from() 方法来提取颜色：
-- -------------------- ---- ------- ----- --- - --- -------- --------------- - ------------ ------- - -------------------- ---------- - -- -- - ----- ------- - --- ------------- ----- -------- - ------------------- -- -- --------- ---- --- --------- ------ -
注意，如果你的图片不在同一个域名下，你需要设置 crossOrigin 属性为 "anonymous"，否则会报跨域错误。
使用
现在，我们已经成功地配置了 vibrant.js，接下来就可以开始使用它了。
获取主要颜色
首先，让我们来获取图像的主要颜色：
const vibrant = new Vibrant(img); const swatches = vibrant.swatches(); const mainColor = swatches["Vibrant"].getHex(); console.log(mainColor); // 输出主要颜色的 HEX 值
在这个例子中，我们调用了 vibrant.swatches() 方法来获取所有的颜色信息，然后通过 swatches["Vibrant"].getHex() 来获取图像的主要颜色。你也可以通过其他方法来获取其他颜色，如 swatches["DarkMuted"] 或 swatches["LightVibrant"]。
获取所有颜色
如果你想获取图像的所有颜色，可以这样做：
const vibrant = new Vibrant(img);
const swatches = vibrant.swatches();
Object.keys(swatches).forEach((key) => {
console.log(swatches[key].getHex());
});这将会输出所有的颜色 HEX 值，包括 Vibrant、Muted、DarkVibrant、DarkMuted、LightVibrant 和 LightMuted。
在 React 中使用
如果你正在使用 React，可以使用 react-vibrant 库来更方便地获取图像颜色。你可以通过以下命令来安装它：
npm install react-vibrant --save
或者
yarn add react-vibrant
然后，在你的组件中导入它，并传入你的图片 URL：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ----------- - -- -- -
----- - ----- -------- -------- ----- - - --------------------------------
-- --------- -
------ ---------------------
-
-- ------- -
------ -----------------
-
------ -
---- ------------------------ ----------------------
--- ---- ------- ---
------
-
-这将会自动提取图像的主要颜色，并将其设置为组件的背景色。
总结
在本教程中，我们详细地介绍了如何安装、配置和使用 vibrant.js。无论你是想从图像中提取颜色，还是想让你的网站更加美观，vibrant.js 都是一个非常有用的工具。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33568