什么是 evatoner
Eva Toner 是一款海外的调色软件，支持多种色彩空间和色彩模式的调整。而 evatoner 就是一个用于在浏览器中使用 Eva Toner 的 npm 包。我们可以通过 evatoner 包来实现在前端中对颜色进行处理、转换等等操作。
安装 evatoner
首先我们需要在项目中安装 evatoner：
npm install evatoner
安装完成之后，我们可以在代码中引入 evatoner：
const Evatoner = require('evatoner');evatoner 的使用
创建 evatoner
使用 evatoner，需要首先创建一个 eva 对象。
const eva = new Evatoner({
defaultMode: 'CMYK',
defaultColorSpace: 'ISOcoated_v2_300_eci'
});其中 defaultMode 和 defaultColorSpace 分别表示 eva 对象的默认工作模式和颜色空间。
色彩空间和颜色模式
首先了解一下什么是色彩空间和颜色模式。简单来说：
色彩空间 它是一组值，可以表示颜色的特定范围， 例如 R、G、B 空间用于表示网页颜色，CMYK 空间表示印刷颜色等。
颜色模式 它对颜色进行了分类，并提供了一组规则，以便表示任何颜色。在网页中常用的颜色模式是 RGB，而在印刷中最常用的是 CMYK。
evatoner 支持的颜色模式和色彩空间有：
- 颜色模式： RGB、ARGB、RGBA、HSL、HSLA、HSB、HSBA、LAB、LCH、XYZ、Yxy、CMYK、CMY、Gray、NCS。
- 色彩空间： sRGB、AppleRGB、AdobeRGB、WideGamutRGB、ProPhotoRGB、DCIP3、ACES-AP0、ACES-AP1、CIELAB、CIELCH、CIEXYZ、Yxy、ISOcoated_v2_300_eci、ISOcoated_v2_500_eci、PSOuncoated_iso12647_eci、Pscoated_iso12647_eci、Webcoated_fogr39_coated。
颜色值的表示
evatoner 中的颜色值有以下几种表示：
- 字符串 表示颜色值的字符串，可以是 hex 格式、rgb 格式等等。例如
"#FFA500"、"rgb(255, 165, 0)"等等。 - 数组 数组中包含被表示颜色的值，元素的数量和颜色模式相关。例如
[255, 165, 0]表示一个 RGB 颜色。
eva 对象中的函数
创建了 eva 对象之后，我们就可以使用它提供的一些函数进行颜色的转换和处理等操作了。
color(value)
将字符串或者数组表示的颜色值转化为 evatoner 中的颜色对象。
const color = eva.color('#FFA500');toMode(value, mode)
将颜色值从当前颜色模式转换为指定颜色模式的颜色值。
const rgbColor = eva.toMode('#FFA500', 'RGB');to(value, colorSpace)
将颜色值从当前颜色空间转换为指定颜色空间的颜色值。
const rgbColor = eva.to('#FFA500', 'sRGB');deltaE(color1, color2)
计算两个颜色之间的色差值，常常用于比较两个颜色的相似性。
const deltaE = eva.deltaE('#FFA500', 'rgb(255, 165, 0)');interpolate(color1, color2, steps)
在两个颜色之间进行插值，生成一系列渐变颜色。
const colors = eva.interpolate('#FFA500', '#FF0000', 10);示例代码
下面是一个使用 evatoner 提取网页中所有颜色信息的示例代码：
-- -------------------- ---- -------
----- ----- - -----------------
----- ------- - -------------------
----- -------- - --------------------
-- ---------
----- --- - --- ----------
------------ ------
------------------ ------
---
----- -------- ----------------- -
----- ---- - ----- ---------------
----- - - ------------------------
----- ------ - ---
------ -- ------
--------- -------- -- -
----- ----- - -------------------------
-- -------- -------
-- -- ----- ----
----- ---------- - ---------------------------
-- ------------- -------
----- ----- - ------------------------------- -----------
-- -----
----- -------- - -----------------
-- ------
-- --------------- -
------------------- -- --
- ---- -
------------- - -
------ --
----- --------------
----------- -------------------
--
-
---
------ -------
-
-------------------------------------
------------ -- --------------------
---------- -- --------------------通过该代码，我们可以提取网页中所有颜色的信息，并统计每种颜色在该页面中出现的次数。同时，使用 evatoner 进行颜色值的处理和转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb981e8991b448da423