简介
image-pal-sharp 是一个基于 Sharp 的图片取色工具，它可以快速获取一张图片中的主色调，并且支持对图片进行 resize 和 crop。该工具基于 Node.js 平台，可以在前端和后端都使用。
安装
使用 npm 进行安装：
npm install image-pal-sharp
使用
获取图片主色调
-- -------------------- ---- -------
----- - ---------- - - ---------------------------
------ -- -- -
----- --------- - ------------- -- ----
----- ------------- - -
----------- -- -- -------------- -
-------- --- -- ----------- --------- --
--
----- ------- - ----- --------------------- ---------------
---------------------
-----palette 的值将会是一个数组，包含了指定数量的主色调信息。
对图片进行 resize 和 crop
const { sharp } = require('image-pal-sharp');
(async () => {
const imagePath = './test.png'; // 图片路径
const image = sharp(imagePath);
const resizedImageBuffer = await image.resize(300, 300).toBuffer();
const croppedImageBuffer = await image.extract({ left: 100, top: 100, width: 300, height: 300 }).toBuffer();
})();可以使用 sharp 函数对图片进行 resize 和 crop 操作，返回值为 Buffer 类型。
深度讲解
获取图片主色调
image-pal-sharp 基于 Sharp，它的主要作用是获取一张图片中的主色调。它的核心逻辑如下：
- 先将图片进行 resize 操作，将其宽度调整为指定的值，以加快颜色计算速度。
- 对于调整后的图片，遍历所有像素点，将它们转化成 Lab 颜色空间，这里的 L,A,B 就是颜色的三个通道。
- 对于转换后的每个像素点，做聚类分析，K-Means 算法可以实现。
- 通过聚类分析得到的 K 个主要颜色，合并相似的颜色，再将颜色值转化为 rgb 值，按照每个 rgb 值在图片中出现的频率进行权重计算，得到最终的主色调集合。
具体实现可以查看代码：
-- -------------------- ---- -------
----- -------- --------------------- - ---------- - -- ------- - -- - - --- -
----- ----- - -----------------
----- ---- - ----- -------------- ------ ------------------- ---- --------------
----- ------ - ------------- --- --------------- -- ------------- --------------------------------------------------- -- ----- -- ---------- ------- -------- ------ -
------------------------------- -- -- -- -- --- - - - - ---------- ----- - -- ------------------ -- ------------------ -- ------------------ -- --- -- ------ - ---- -----
----- ----------- -- -- --- -- -- -- -- -- - ------------- - -- -- - -- -----------------
----- ------- - ----- ---------------------- - ------- ------------- - - --- - ---- - ------ -------------- ------- -- --------- - - --
--------- ------ ----------- ------- -- ---- ---------- ------------------- ---- --
----------- ------------------ ---- --
-------------- -- -
----- -
----- ----- - ----- --
- - -------
----- ------ - ---
--- ---- - - -- - - ------------ - -- -- -
------------------------------------ - ------------ - -------
-
------ - ------- ----- --
---
------ ---------------
-对图片进行 resize 和 crop
sharp 是一个 Node.js 平台下的图片处理库，它提供了强大的图片处理功能，包括 resize 和 crop 等操作。代码示例：
const imagePath = './test.png'; // 图片路径
const image = sharp(imagePath);
const resizedImageBuffer = await image.resize(300, 300).toBuffer();
const croppedImageBuffer = await image.extract({ left: 100, top: 100, width: 300, height: 300 }).toBuffer();其中，resize 的参数为目标宽度和高度，extract 的参数为左上角坐标（left、top）、宽度和高度。通过对图片进行 resize 和 crop 操作，可以得到不同尺寸和位置的图片，用于不同的业务需求。
指导意义
image-pal-sharp 可以作为一个基础的图片处理工具，为前端和后端的开发提供了非常方便的色彩提取和图片处理功能。在前端颜色设计和图片展示等方面都具有重要的应用价值。同时，image-pal-sharp 代码清晰易读，学习难度相对较低，也为后续研究和扩展提供了基础保障。对于前端开发人员，掌握 image-pal-sharp 的使用方法，能够提高开发效率，降低开发难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609e81e8991b448dedd4