动手：颜色提取与调色板

你要做什么

上传一张图片，自动提取主要颜色，生成美观的调色板。

⏱️ 20 分钟 | 🛠️ Vue 3 + Canvas API

跟着做

帮我做一个颜色提取工具（Vue 3）：
1. 拖拽或点击上传一张图片
2. 自动提取出 5 种主色调
3. 每个颜色显示色块 + HEX 色值（如 #7C3AED）
4. 点击色值可以复制到剪贴板
5. 复制成功后显示"已复制"提示
6. 如果没有上传图片，显示一个默认的渐变色示例
7. 用 Canvas API 实现颜色提取

核心原理

Canvas API 可以读取图片的像素数据：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// imageData.data 包含每个像素的 RGBA 值
// 通过聚类算法找出出现次数最多的颜色

不需要完全理解——告诉 AI 你要什么，它来写。

🎯 进阶挑战

• 支持调节提取颜色数量（3-8 种）
• 显示颜色的 RGB、HSL 值
• 导出调色板为 PNG 图片

✅ 你做到了

• 学会了使用 Canvas API 处理图片
• 理解了颜色提取的原理
• 做了一个设计感十足的调色板工具