204 lines
4.4 KiB
Markdown
204 lines
4.4 KiB
Markdown
# 颜色数据提取工具
|
||
|
||
## 简介
|
||
|
||
这个工具用于从 `pages-list` 目录下的HTML文件中提取拼豆/像素格子颜色数据，并保存为JSON格式。
|
||
|
||
## 功能
|
||
|
||
- 自动扫描 `pages-list` 目录下所有的 `像素格子.html` 文件
|
||
- 从HTML中提取 `color-name`（颜色名称）和 `color`（Hex颜色值）
|
||
- 按文件夹名称组织数据
|
||
- 生成格式化的JSON文件
|
||
|
||
## 使用方法
|
||
|
||
### 运行提取脚本
|
||
|
||
```bash
|
||
bun run extract-colors.ts
|
||
```
|
||
|
||
或者：
|
||
|
||
```bash
|
||
bun run extract
|
||
```
|
||
|
||
### 输出文件
|
||
|
||
提取的数据将保存到 `colors.json` 文件中。
|
||
|
||
## 数据格式
|
||
|
||
JSON文件的结构如下：
|
||
|
||
```json
|
||
{
|
||
"COCO - 色号预览（291色）": [
|
||
{
|
||
"color-name": "A01",
|
||
"color": "#FFFFFF"
|
||
},
|
||
{
|
||
"color-name": "A02",
|
||
"color": "#FEFCFF"
|
||
}
|
||
...
|
||
],
|
||
"DMC十字绣实色 - 色号预览（508色）": [
|
||
{
|
||
"color-name": "B5200",
|
||
"color": "#FFFFFF"
|
||
},
|
||
...
|
||
],
|
||
...
|
||
}
|
||
```
|
||
|
||
## 统计信息
|
||
|
||
- **颜色集合数量**: 31个
|
||
- **总颜色数量**: 5888个
|
||
|
||
### 包含的颜色品牌
|
||
|
||
- COCO系列（多种规格：291色、120色、144色、168色、192色、221色、24色、48色、72色、96色）
|
||
- DMC十字绣实色（508色）
|
||
- DODO（291色）
|
||
- Mard系列（多种规格：291色、120色、144色、221色、24色、264色、48色、72色、96色）
|
||
- 优肯（174色、221色）
|
||
- 卡卡（284色）
|
||
- 咪小窝（290色）
|
||
- 小舞（291色）
|
||
- 柿柿（220色）
|
||
- 漫漫（278色）
|
||
- 盼盼（289色）
|
||
- 童趣（120色）
|
||
- 黄豆豆（291色）
|
||
|
||
## 在代码中使用
|
||
|
||
### 示例1：读取所有颜色
|
||
|
||
```javascript
|
||
import colors from './colors.json';
|
||
|
||
// 遍历所有颜色集合
|
||
Object.entries(colors).forEach(([setName, colorList]) => {
|
||
console.log(`${setName} - 共 ${colorList.length} 个颜色`);
|
||
|
||
colorList.forEach((color, index) => {
|
||
console.log(` ${index + 1}. ${color['color-name']}: ${color.color}`);
|
||
});
|
||
});
|
||
```
|
||
|
||
### 示例2：查找特定颜色
|
||
|
||
```javascript
|
||
import colors from './colors.json';
|
||
|
||
function findColor(hexColor: string) {
|
||
const results = [];
|
||
|
||
Object.entries(colors).forEach(([setName, colorList]) => {
|
||
const found = colorList.find(c => c.color === hexColor);
|
||
if (found) {
|
||
results.push({
|
||
brand: setName,
|
||
colorName: found['color-name']
|
||
});
|
||
}
|
||
});
|
||
|
||
return results;
|
||
}
|
||
|
||
// 查找白色
|
||
const whiteColors = findColor('#FFFFFF');
|
||
console.log('白色色号:', whiteColors);
|
||
```
|
||
|
||
### 示例3：获取特定品牌的颜色
|
||
|
||
```javascript
|
||
import colors from './colors.json';
|
||
|
||
const cocoColors = colors['COCO - 色号预览（291色）'];
|
||
console.log(`COCO共有 ${cocoColors.length} 个颜色`);
|
||
|
||
// 获取前5个颜色
|
||
console.log('前5个颜色:', cocoColors.slice(0, 5));
|
||
```
|
||
|
||
### 示例4：统计颜色分布
|
||
|
||
```javascript
|
||
import colors from './colors.json';
|
||
|
||
const stats = {
|
||
totalColors: 0,
|
||
totalSets: Object.keys(colors).length,
|
||
largestSet: '',
|
||
largestSize: 0,
|
||
smallestSet: '',
|
||
smallestSize: Infinity
|
||
};
|
||
|
||
Object.entries(colors).forEach(([setName, colorList]) => {
|
||
stats.totalColors += colorList.length;
|
||
|
||
if (colorList.length > stats.largestSize) {
|
||
stats.largestSize = colorList.length;
|
||
stats.largestSet = setName;
|
||
}
|
||
|
||
if (colorList.length < stats.smallestSize) {
|
||
stats.smallestSize = colorList.length;
|
||
stats.smallestSet = setName;
|
||
}
|
||
});
|
||
|
||
console.log('统计信息:', stats);
|
||
```
|
||
|
||
## 技术细节
|
||
|
||
- **运行时**: Bun
|
||
- **语言**: TypeScript
|
||
- **数据提取方式**: 正则表达式解析HTML
|
||
- **输出格式**: JSON（UTF-8编码）
|
||
|
||
## 文件说明
|
||
|
||
- `extract-colors.ts`: 主程序文件，负责扫描、解析和保存数据
|
||
- `colors.json`: 提取后的颜色数据（自动生成）
|
||
- `README.md`: 本说明文件
|
||
|
||
## 注意事项
|
||
|
||
1. 确保 `pages-list` 目录和HTML文件存在
|
||
2. HTML文件的名称必须为 `像素格子.html`
|
||
3. 颜色数据从HTML的 `<li class="color-item">` 元素中提取
|
||
4. 如需重新提取，直接运行脚本即可覆盖旧的JSON文件
|
||
|
||
## 故障排除
|
||
|
||
### 问题：运行时找不到HTML文件
|
||
|
||
**解决方案**：确保在正确的目录下运行脚本，`pages-list` 文件夹应该在当前目录。
|
||
|
||
### 问题：提取的颜色数量不对
|
||
|
||
**解决方案**：检查HTML文件的格式是否符合预期，特别是 `color-name` 和 Hex颜色的HTML结构。
|
||
|
||
### 问题：JSON文件格式错误
|
||
|
||
**解决方案**：删除 `colors.json` 文件，重新运行脚本。
|
||
|
||
## 许可证
|
||
|
||
MIT
|