什么是 evatoner
Eva Toner 是一款海外的调色软件,支持多种色彩空间和色彩模式的调整。而 evatoner
就是一个用于在浏览器中使用 Eva Toner 的 npm 包。我们可以通过 evatoner 包来实现在前端中对颜色进行处理、转换等等操作。
安装 evatoner
首先我们需要在项目中安装 evatoner:
--- ------- --------
安装完成之后,我们可以在代码中引入 evatoner:
----- -------- - --------------------
evatoner 的使用
创建 evatoner
使用 evatoner,需要首先创建一个 eva 对象。
----- --- - --- ---------- ------------ ------- ------------------ ---------------------- ---
其中 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 中的颜色对象。
----- ----- - ---------------------
toMode(value, mode)
将颜色值从当前颜色模式转换为指定颜色模式的颜色值。
----- -------- - --------------------- -------
to(value, colorSpace)
将颜色值从当前颜色空间转换为指定颜色空间的颜色值。
----- -------- - ----------------- --------
deltaE(color1, color2)
计算两个颜色之间的色差值,常常用于比较两个颜色的相似性。
----- ------ - --------------------- --------- ---- -----
interpolate(color1, color2, steps)
在两个颜色之间进行插值,生成一系列渐变颜色。
----- ------ - -------------------------- ---------- ----
示例代码
下面是一个使用 evatoner 提取网页中所有颜色信息的示例代码:
----- ----- - ----------------- ----- ------- - ------------------- ----- -------- - -------------------- -- --------- ----- --- - --- ---------- ------------ ------ ------------------ ------ --- ----- -------- ----------------- - ----- ---- - ----- --------------- ----- - - ------------------------ ----- ------ - --- ------ -- ------ --------- -------- -- - ----- ----- - ------------------------- -- -------- ------- -- -- ----- ---- ----- ---------- - --------------------------- -- ------------- ------- ----- ----- - ------------------------------- ----------- -- ----- ----- -------- - ----------------- -- ------ -- --------------- - ------------------- -- -- - ---- - ------------- - - ------ -- ----- -------------- ----------- ------------------- -- - --- ------ ------- - ------------------------------------- ------------ -- -------------------- ---------- -- --------------------
通过该代码,我们可以提取网页中所有颜色的信息,并统计每种颜色在该页面中出现的次数。同时,使用 evatoner 进行颜色值的处理和转换。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055cb981e8991b448da423