第一次尝试解析TCX
第二次尝试解析TPG
第三次一次到位TCX&TPG
一、获得Pantone官网数据
最近又登了一次潘通官网，查询颜色时，偶然发现，不知道啥时候官网改版了，可以通过控制台源码查看到色块颜色了，而且颜色值与我之前整理的还不一样。
奸笑~
那么，老样子，通过浏览器控制台窗口，检查元素，将结果保存到一个文件中。
这里需要调节下缩放，使所有的元素都显示出来，否则在控制台窗口，复制出来的数据不完整。
通过这里切换TCX和TPG两个颜色系统
二、格式化数据
不得不说，现在AI工具挺好用的，让AI生成一段代码，帮我们把结果检索出来吧。
<script type="text/javascript" src="PANTONE TCX2625.js"></script>
<script>
// 将HTML字符串转换为DOM对象
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(str, 'text/html');
// 初始化结果对象
const result = [];
// 遍历DOM结构，提取id和background-color属性值
const chipContainers = htmlDoc.querySelectorAll('[data-testid="grid-chip-container"]');
chipContainers.forEach((container) => {
const childDiv = container.querySelector('.MuiBox-root');
if (childDiv) {
const id = childDiv.getAttribute('id');
const bgColor = childDiv.style.backgroundColor;
// 提取并存储rgb值，同时处理id
if (id && bgColor.startsWith('rgb')) {
const rgbMatch = bgColor.match(/\d+/g);
if (rgbMatch) {
const cleanedId = id.replace('color-', '').replace(' TCX', '');
const rgbString = `${
rgbMatch.join(', ')}`;
const kv = {
id: cleanedId,
rgb: rgbString
}
result.push(kv);
}
}
}
});
// 构建并输出JSON字符串
const jsonStr = JSON.stringify(result, null, 2);
console.log(jsonStr);
</script>
同样的，把输出的结果分别保存到一个TCX.txt、TPG.txt文件中，稍后我们会使用。
三、分析数据
第一个文件是通过之前解析TPG时得到的，可以看下文章开头给到的链接
通过分析可以得知，TCX与TPG共用一个编号系统，差别就是结尾用了TGP或TCX做区分，只是rgb值不一样，而十六进制颜色可以通过十进制换算得出。（ps.最新的到信息里，编号为17-3938的色号是在2020年的2625个颜色的基础上，于2022年新增加的，文中并不对此做处理）
操作：分别读取三个文件，通过TCX.txt中的id查询其其他信息(所在页码、行、名称)，然后整理成一个新的数据结构，并保存结果。
using Newtonsoft.Json;
using System;
using System.Text;
namespace PantoneColor
{
internal class Program
{
public class PantonePageInfo
{
public string nr;
public string hexCode;
public string page;
public int row;
public string rgb;
public string name;
}
public class Color
{
public string hexCode, rgb;
public Color(KV kv)
{
rgb = kv.rgb;
hexCode = RgbToHex(rgb);
}
public override string ToString()
{
return $"{
{\"hexCode\":\"{
hexCode}\",\"rgb\":\"{
rgb}\"}}";
}
string RgbToHex(string rgbString)
{
// 从RGB字符串中提取每个十进制数值
string[] rgbValuesStr = rgbString.Split(',');
int[] rgbValues = Array.ConvertAll(rgbValuesStr, s => int.Parse(s.Trim()));
// 将每个十进制数值转换为两位十六进制字符串，并确保以0填充不足两位的值
StringBuilder hexBuilder = new StringBuilder("#");
foreach (int value in rgbValues)
{
hexBuilder.Append(((value & 0xFF).ToString("X2")));
}
return hexBuilder.ToString();
}
}
public class KV
{
public string id;
public string rgb;
}
public class Pantone
{
public string nr;
public Color tcx;
public Color tpg;
public string page;
public int row;
public string name;
public static Pantone ToPantone(PantonePageInfo info)
{
Pantone pantone = new Pantone();
pantone.nr = info.nr.Replace("PANTONE ", "").Replace(" TPG", "");
pantone.page = info.page;
pantone.row = info.row;
pantone.name = info.name;
return pantone;
}
public override string ToString()
{
return $"{
{" +
$"\"nr\":\"{
nr}\"," +
$"\"tcx\":{
tcx}," +
$"\"tpg\":{
tpg}," +
$"\"page\":\"{
page}\"," +
$"\"row\":{
row}," +
$"\"name\":\"{
name}" +
$"\"}}";
}
}
static void Main(string[] args)
{
KV[] tcxs = GetKVs("TCX.txt");
KV[] tgps = GetKVs("TGP.txt");
using (FileStream fs1 = new FileStream("PantoneColorJson.txt", FileMode.Open, FileAccess.Read))
{
StreamReader reader = new StreamReader(fs1, Encoding.Default);
string json = reader.ReadToEnd();
reader.Close();
PantonePageInfo[] pageInfos = JsonConvert.DeserializeObject<PantonePageInfo[]>(json);
fs1.Close();
using (FileStream fs2 = new FileStream("Pantone.txt", FileMode.Create, FileAccess.Write))
{
StreamWriter writer = new StreamWriter(fs2, Encoding.UTF8);
for (int i = 0; i < pageInfos.Length; i++)
{
Pantone pantone = Pantone.ToPantone(pageInfos[i]);
KV tgp = GetKV(tgps, pantone.nr);
KV tcx = GetKV(tcxs, pantone.nr);
if (tgp == null)
{
Console.WriteLine("Can't find TGP: " + pantone.nr);
continue;
}
if (tcx == null)
{
Console.WriteLine("Can't find TCX: " + pantone.nr);
continue;
}
pantone.tpg = new Color(tgp);
pantone.tcx = new Color(tcx);
if (i == 0)
{
writer.WriteLine($"[{
pantone},");
}
else if (i == pageInfos.Length - 1)
{
writer.WriteLine($"{
pantone}]");
}
else
{
writer.WriteLine($"{
pantone},");
}
Console.WriteLine(pantone.nr);
}
writer.Close();
fs2.Close();
}
}
Console.WriteLine("Write Over! Press Any Key To Continue!");
}
public static KV GetKV(KV[] kvs, string nr)
{
for (int i = 0; i < kvs.Length; i++)
{
if (nr.Equals(kvs[i].id))
{
return kvs[i];
}
};
return null;
}
public static KV[] GetKVs(string jsonPath)
{
using (FileStream fs = new FileStream(jsonPath, FileMode.Open, FileAccess.Read))
{
StreamReader reader = new StreamReader(fs, Encoding.Default);
string txt = reader.ReadToEnd();
KV[] kvs = JsonConvert.DeserializeObject<KV[]>(txt);
reader.Close();
fs.Close();
return kvs;
}
}
}
}
就可以得到这样一个整合过的数据了：
[
{
"nr": "11-4001",
"tcx": {
"hexCode": "#EDF1FF",
"rgb": "237, 241, 255"
},
"tpg": {
"hexCode": "#F0F0F1",
"rgb": "240, 240, 241"
},
"page": "1.001",
"row": 1,
"name": "Brilliant White"
},
{
"nr": "11-0601",
"tcx": {
"hexCode": "#F4F9FF",
"rgb": "244, 249, 255"
},
"tpg": {
"hexCode": "#F5F7F6",
"rgb": "245, 247, 246"
},
"page": "1.001",
"row": 2,
"name": "Bright White"
},
{
"nr": "11-0700",
"tcx": {
"hexCode": "#F4F7FF",
"rgb": "244, 247, 255"
},
"tpg": {
"hexCode": "#F3F4F4",
"rgb": "243, 244, 244"
},
"page": "1.001",
"row": 3,
"name": "Lucent White"
},
···
···
···
]
收工~