介绍
img-color 是一个可以提取图片主要颜色的 npm 包。它可以用于前端开发中对图片进行分析，并提取出主要的颜色值，以便于后续开发中的设计、布局等使用。
安装
可以使用 npm 进行安装：
npm install img-color
使用
引入
在需要使用的文件中引入 img-color：
import ImgColor from 'img-color';
创建实例
创建一个 ImgColor 的实例，传入需要提取颜色的图片路径或 canvas 元素:
const imgColor = new ImgColor('/path/to/image.jpg');或者
const canvas = document.querySelector('canvas');
const imgColor = new ImgColor(canvas);获取图片颜色
在创建实例后，可以使用 getColor() 方法获取图片的颜色信息。方法返回一个 Promise 对象，可以使用 async/await 或者 .then() 方法获取返回值。
// 使用 async/await
const colors = await imgColor.getColor();
// 使用 .then()
imgColor.getColor().then(colors => {
console.log(colors);
});getColor() 方法返回的是一个数组，里面包含了图片的主要颜色信息。数组的每个元素都包含以下内容：
color: 颜色值，如#ffffffpercent: 颜色所占比例，为一个 0~1 的小数
例如：
[
{ color: '#317837', percent: 0.4 },
{ color: '#cbcbcb', percent: 0.3 },
{ color: '#ffffff', percent: 0.2 },
{ color: '#1f1f1f', percent: 0.1 }
]示例
提取图片颜色
以下是一个简单的例子：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
---- ------------------- -------------------
------- --------------------------
-------
--------- -------------------- ---- ------- -- -------- ------ -------- ---- ------------ ----- ---------- - ----------------------------------------- ----- -------- - --- --------------------- ------------------------------- -- - -------------------- ---
绘制颜色占比图
img-color 提供了一个较为简单的获取颜色占比信息的方法，可以用于实现颜色占比图的绘制效果：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
---- ------------------- -------------------
------- ----------------- ----------- ----------------------
------- --------------------------
-------
--------- -------------------- ---- -------
-- --------
------ -------- ---- ------------
----- ---------- - -----------------------------------------
----- ------------- - ----------------------------------------
----- --- - -------------------------------
----- -------- - --- ---------------------
------------------------------- -- -
-- ---
----- ------------ - --------------------- ------ -- ----- - -------------- ---
-- ----
--- ---------- - ---- - --------
-- -------
--- ---- - - -- - - -------------- ---- -
----- ----- - ----------
-- ----
----- -------- - ---------- - ------------- - ------------ - - - --------
-- ----
----------------
------------------------------ - -- -------------------- - ---
--------------------------- - -- -------------------- - -- ------------------- - -- ----------- ----------
------------- - ------------
-----------
----------------
-- -----------
---------- - ---------
-
---结语
img-color 可以快速提取图片主要颜色信息，方便开发者在前端开发中使用。它的使用方法简单易懂，但是需要注意颜色信息的每个元素所占比例之和为 1。希望本文对各位开发者对 img-color 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dac9c