color-thief-don 是一个用 JavaScript 编写的颜色提取工具。它可以从任意图片中提取出主要颜色，并输出成 RGB、HEX、HSV 等格式。本文将为大家详细介绍 color-thief-don 的使用方法及其指导意义。
安装
使用 npm 可以轻松安装 color-thief-don。
npm install color-thief-don
使用
在使用 color-thief-don 之前，需要做一件事情，就是将要提取颜色的图片加载到 HTML 页面中。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ----- -----------
-------
------
---- ----------------- --
------- --------------------------
-------
-------注意，img 标签的 src 属性要填写图片的路径。
在 index.js 文件中，我们可以使用 color-thief-don 来提取颜色。
import ColorThief from 'color-thief-don';
const img = document.querySelector('img');
const colorThief = new ColorThief();
const dominantColor = colorThief.getColor(img);
const palette = colorThief.getPalette(img);上述代码中，我们先将 img 选取出来，并实例化一个 ColorThief 对象。调用 getColor 方法可得到图片的主要颜色，调用 getPalette 方法可得到图片的调色板。这两个方法都可以得到一个包含 RGB、HEX、HSV 等格式的颜色数组。
示例
下面是基于 color-thief-don 做的一个小应用，该程序可以从一张图片中提取出主要颜色，并自动为其添加一个背景色。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ----- --- ----------
-------
---- -
------- --
-------- --
-
---------- -
------ ------
------- ------
-------- -----
--------------- -------
------------ -------
---------------- -------
----------- -------
-
--- -
--------- ------
---- --
----- --
------ ------
------- ------
-------- ----
-------- ---
-
--------
-------
------
---- ------------------
---- ----------------- --
--------- ----------
------
---- -----------------
------- --------------------------
-------
--------- -------------------- ---- ------- ------ ---------- ---- ------------------ ----- --- - ------------------------------ ----- --------- - ------------------------------------- ----- -- - ------------------------------ ----- ---------- - --- ------------- ----- ------- - ------------------------- ------------------------------- - ------------------- -------------- ---------------- ------------------------ - ------------------- -------------- ---------------- ------------------------ - ------------------ ----------------------- - -------- --------------------------- - ---------
效果如下：
从上述示例中可以看出，color-thief-don 可以方便地提取图片中的主要颜色，并配合其他 Web 技术做出各种有趣的效果。使用 color-thief-don 时需要注意以下几点：
- 需要在 HTML 中添加图片元素，否则无法读取图片。
- 图片需要在加载后再使用
ColorThief进行提取，否则可能读取不到图片。 ColorThief可以返回多种格式的颜色数组，可以根据自己的需要选用。
结论
color-thief-don 可以方便地提取图片中的主要颜色，可以在图片处理、UI 设计等方面起到很好的作用。在实际开发中，我们可以借助该工具来开发更为美观的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662881e8991b448e200d