在前端开发中，图片的处理是非常重要的一部分，而获取一张图片的平均颜色是一个重要的需求。npm 包 fast-average-color 就可以很轻松地帮助我们解决这个问题。
简介
fast-average-color 是一个快速获取图片平均颜色的库，它具有以下特点：
- 获取速度非常快
- 支持 Canvas 和 Image 元素获取图片颜色
- 支持异步操作和缓存
- 支持多种图片类型
安装
在安装之前，需要确保已经安装了 Node.js 环境。
使用 npm 进行安装：
npm install fast-average-color --save
使用
获取图片平均颜色
可以通过以下方式获取图片的平均颜色：
-- -------------------- ---- ------- ----- --- - ------------------------------ ----- --- - --- ------ -- -- ----- --------- --------------------------------- -- - ------------------- --- -- -- ------ -------- ------------------------------------------ ------- ------ ------------------------ -- - ------------------- ---
其中 img 和 canvas 分别为 Image 和 Canvas 元素，fac.getColorAsync() 方法会返回一个 Promise，在 Promise 中可以获取到平均颜色。
缓存
fast-average-color 还支持缓存，可以通过以下方式启用：
-- -------------------- ---- ------- ----- --- - ------------------------------ ----- --- - --- ----- -- --------- -- -- ------ ----- ------------ -- - -- - ----- --- --------------------------------- -- - ------------------- ---
配置
可以通过实例化 fast-average-color 时传入的第二个参数进行配置，以下是默认配置：
-- -------------------- ---- ------- - -- ----------- --- -- ------- --- - ---- -- --------------- -- ----------------------------------------------------------------------------------------- ------- ------ -- -------- --- ------- -- --------------- -- ------------------------------------------------------------------------------------ ----- ---- --------- -- ------ -- ------------ -- --- - -- --------------------- -- ---------------------- -- ------------------- -- ------------------ -- -------------------- -- ------------ -- ------------------------------------------------------------------------------------ -- ----------------------------------------------------------------------------------------- -- --------------------------------------------------------------------------------------- -------- -- -- --------- -- ---------------- -- --------------- -- --- --- ------ ---- -
所有的配置项都可以自定义，可以根据实际需求进行调整。
示例
以下是一个获取图片平均颜色的完整示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
-------
------
---- ---------- ----------------------------------- -----------
------- ---------------------------------------------------------------------------------------
--------
----- --- - ------------------------
----- --- - --- ------
----- --- - ---------------------------------
--------------------------------- -- -
----------------------------------- - -----------
-----------------------
---
---------
-------
-------上面的示例中，通过 CDN 引用了 fast-average-color 库，然后创建了一个实例并获取了图片的平均颜色，并将颜色赋值为背景色。
总结
fast-average-color 是一个非常实用的 npm 包，可以帮助我们快速获取图片的平均颜色，并且具有很高的效率和可配置性。在实际开发中，我们需要根据实际需求进行调整，以达到最好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155711