在前端开发中，有时候我们需要提取一张图片的主色调，从而做出更符合品牌色彩的配色方案。而 npm 包 get-rgba-palette 就提供了这一功能。
注：本篇文章的示例代码使用了 ES6 语法，需要在支持 ES6 的环境下运行。
安装
在命令行中输入以下命令即可安装该包：
npm install get-rgba-palette
使用方法
导入包：
import getRgbaPalette from 'get-rgba-palette';
调用函数：
getRgbaPalette(element, count, options)
其中，element 是要获取颜色的图片元素，count 是要获取的颜色数量， options 是可选参数，控制颜色获取的方式。下面具体介绍这三个参数的用法。
element
element 参数可以接受多种类型的值：
- HTMLImageElement：要获取颜色的图片元素；
- HTMLCanvasElement：canvas 元素，通过它可以获取图片数据；
- ImageData：表示图片数据及其属性，通过 canvas.getContext('2d').getImageData() 方法获取。
示例代码：
-- -------------------- ---- ------- ----- --- - --- -------- ------- - ------------ ---------- - -- -- - -- --- ----- ---- ---------------- ------------------- -- -- --- ----- ---- ----------------- ----- ------ - --------------------------------- ----- --- - ------------------------ ------------------ -- --- ----- --------- - ------------------- -- ------------- --------------- ---------------------- -- -- --- ----- ---- --------- ------------------------- -- --展开代码
count
该参数指定了要获取的主色调数量。
示例代码：
getRgbaPalette(img, 3) // 获取 3 种主色调
options
options 参数是一个对象，包含以下可选属性：
maxDimension
此属性定义了最大维度，当图片的长宽都超过maxDimension时，将按比例缩小图片。默认值为 512。
示例代码：
getRgbaPalette(img, 5, {maxDimension: 1024}) // 图片长宽超过 1024 时缩小比例
quality
此属性定义了颜色质量（1-100），影响配色的精度和颜色数量。
示例代码：
getRgbaPalette(img, 5, {quality: 80}) // 颜色质量为 80
示例
以下示例展示了如何在一张图片上显示主色调：
HTML：
<div class="img-container"> <img src="cat.jpg" id="img"/> <div class="palette"></div> </div>
CSS：
-- -------------------- ---- ------- -------------- - --------- --------- ------ ------ - -------- - --------- --------- ---- ----- ------ ----- -------- ----- - -------- ---------- - ------ ----- ------- ----- ------------- ----- -展开代码
JavaScript：
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ----- --- - ------------------------------- ----- ---------- - ----------------------------------- ---------- - -- -- - ----- ------- - ------------------- --- --------------------- -- - ----- --- - ------------------------------ ------------------------- - ------------------ ------------ ------------ -------------- ------------- - ------------ ---------------------------- --- --展开代码
效果：
总结
本篇文章介绍了 npm 包 get-rgba-palette 的使用方法，以及可选参数的含义，最后通过示例展示了获取主色调并在页面上显示的过程。这个包在实际项目开发中非常有用，希望对读者有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3350a6dbf7be33b2566dcc
