前言
在前端开发中，图片的处理一般是提取图片主色调，用于制作渐变色、边框色等效果。本篇文章将介绍使用 npm 包 @cschear/color-thief 通过 JavaScript 代码提取图片主色调的方法，并提供相关示例代码以供参考。
安装
@cschear/color-thief 是一个 npm 包，安装非常方便。在终端输入以下命令即可：
--- ------- -------------------- ------
用法
将主色调提取出来有两种方法：
- 获取图片的 base64 数据，在前端计算主色调。
- 将图片上传到服务器，由服务器计算主色调并返回数据。
我们下面将分别介绍这两种方法的使用和优缺点。
在前端计算主色调
在前端计算主色调，我们需要使用 HTML5 的 canvas 和 JavaScript 的 Image 对象。以下是一个简单的示例：
------ ---------- ---- ----------------------- ----- ----- - --- -------- ----------------- - ----------- --------- - -------------------------------- ------------ - -- -- - ----- ---------- - --- ------------- ----- ----- - --------------------------- ------------------- -
上面的代码中，我们先新建一个 Image 对象并设置 crossOrigin 属性为 Anonymous，以便跨域访问图片。接着监听 onload 事件，当图片加载完毕后执行回调函数。在回调函数中，我们新建一个 ColorThief 实例，调用 getColor 方法获取主色调，并将结果打印到控制台。
getColor 方法返回一个包含红、绿、蓝三个通道的颜色数组，例如 [100, 200, 255]。
优缺点
优点：
- 可以不上传图片到服务器，节省带宽。
- 可以在本地高并发提取多张图片主色调。
缺点：
- 图片必须在前端加载，较大的图片会较慢。
- 受到跨域限制，无法直接访问部分图片。
在服务器计算主色调
如果图片较大，或者实现不了跨域访问，可以采用上传图片到服务器的方式。以下是一个简单的 Node.js 示例：
----- ------- - ------------------- ----- --- - ---------- ----- ------ - ------------------ ----- ------ - --------- ----- ---------- - -------------------------------- ------------------ ----------------------- ----- ---- -- - ----- ---------- - --- ------------- ----- ------ - ----------------------------- ----- ----- - ---------------------------- ---------------- --- -----------------
上面的代码中，我们新建了一个 Express 应用，并使用 multer 中间件处理上传的图片。当服务器收到 /color 接口的 POST 请求时，首先新建一个 ColorThief 实例，然后从上传的文件内容中读取图片二进制数据，调用 getColor 方法获取主色调，并将结果以 JSON 格式返回。
优缺点
优点：
- 可以处理较大的图片。
- 可以跨域访问未设置 CORS 的图片。
缺点：
- 需要上传图片到服务器，消耗带宽。
- 不能高并发提取多张图片主色调。
- 需要使用后端技术实现。
参数
ColorThief 的构造函数允许传入一个参数 quality，表示提取颜色的质量，默认值为 10。值越大，颜色提取的精度和准确度越高，但是计算速度会变慢。以下是一个示例：
------ ---------- ---- ----------------------- ----- ----------- - --- ------------- -- ---- -- ----- ----------- - --- ---------------- -- --- --- ----- ----- - --- -------- ----------------- - ----------- --------- - -------------------------------- ------------ - -- -- - ----- ------ - ---------------------------- -- ------- - -- ----- ------ - ---------------------------- -- ------- - --- ------------------- -------- -
总结
通过本文的介绍，我们学习了如何使用 @cschear/color-thief 包提取图片的主色调。我们介绍了两种方式，一种是在前端计算主色调，一种是在服务器计算主色调。这两种方式各有优缺点，在具体应用中需要根据实际情况灵活选择。
参考
@cschear/color-thief文档 https://www.npmjs.com/package/@cschear/color-thief- Canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- Multer https://github.com/expressjs/multer
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562f381e8991b448e0ad8