Color Thief:js图片获取调色盘

Color Thief 是一个用于提取图片主色调的 JavaScript 库。以下是如何使用 Color Thief 获取图片调色盘的示例代码：

首先，确保你已经引入了 Color Thief 库。你可以通过 npm 安装它：

npm install color-thief

然后在你的 JavaScript 文件中，使用以下代码来获取图片的主色调：

// 引入 Color Thief
import ColorThief from 'color-thief';
 
// 创建 Color Thief 实例
const colorThief = new ColorThief();
 
// 获取图片的主色调
const img = document.getElementById('my-image'); // 确保你的 HTML 中有一个 id 为 'my-image' 的图片元素
const dominantColor = colorThief.getColor(img);
 
// 输出主色调
console.log('Dominant Color:', dominantColor);
 
// 获取调色盘（取前 10 种主要颜色）
const palette = colorThief.getPalette(img, 10);
 
// 输出调色盘
console.log('Palette:', palette);

确保你的 HTML 中有一个图片元素，例如：

<img id="my-image" src="path/to/your/image.jpg" alt="Your Image">

这段代码会输出图片的主色调和前 10 种主要颜色到控制台。你可以根据需要调整调色盘中颜色的数量，第二个参数在 getPalette 方法中设置。