简介
在网页开发中，常常需要获取图片的主色调，以便用来作为网页的主题色或者进行其他处理。而 color-thief-make 就是一个 npm 包，用来实现从图片中提取主色调的功能。
安装
首先需要安装 Node.js 和 npm，如果已经安装过则跳过这一步。
在 Windows 中可以前往 Node.js 官网 下载安装包进行安装。在 Linux 中可以使用以下命令安装：
sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm
安装完成后，使用以下命令安装 color-thief-make：
npm install color-thief-make
使用
使用起来非常简单，首先需要引入 color-thief-make 包：
let ColorThief = require('color-thief-make');然后可以用以下代码获取图片的主色调：
let colorThief = new ColorThief();
let dominantColor = colorThief.make('./test.jpg');
console.log(dominantColor);其中 './test.jpg' 是图片文件的路径，dominantColor 是一个包含三个元素的数组，分别表示 R、G、B 三个颜色通道的值。
选项
color-thief-make 的构造函数还可以接受一个选项参数。可以设置参数来影响提取主色调的精确度和速度。以下是可能会经常用到的参数：
quality：影响色彩量化的精确度。默认为 10。较大的数字会使色彩量化的精确度更高，但速度较慢。colors：设置提取颜色的数量。默认为 10。较大的数字会提取更多的颜色，但速度较慢。
可以参考以下代码设置选项：
let colorThief = new ColorThief({
quality: 20,
colors: 5,
});异常处理
在读取图片时可能会发生 IO 错误，此时将抛出一个异常。因此，使用 color-thief-make 时需要进行异常处理：
try {
let dominantColor = colorThief.make('./test.jpg');
console.log(dominantColor);
} catch (e) {
console.log(e);
}示例
以下是一个完整的例子，用来提取图片的主色调并在页面上显示：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ----------
------- ------------------------------------------------------------------------------------------
-------
------
------ ----------- ---------------- -----------------------------------
---- ----------------
--------
-------- ----------------------- -
--- ---- - ----------------------
--- --- - --------------------------
--- ---------- - --- -------------
--- ----- - --- --------
--------- - ----
------------ - ---------- -
--- ------------- - -----------------------
--- ---- - --------------------------------
-------------------------- - ----------------------------------
--
-
---------
-------
-------在选择一个图片文件后，页面的背景色将变为图片的主色调。
总结
无论是从像素级别还是视觉感受的角度，颜色是图片中一个非常重要的元素。color-thief-make 可以帮助我们快速地从图片中提取出主色调，为后续开发工作提供便利。同时，学习如何使用 npm 包，也对我们掌握前端开发技能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac67027