前言

近期規劃遇到一個需求，項目中所用顏色需要使用潘通色卡上的顏色，他們給我一套某寶購買的色卡集（共計2625個潘通色）以作參考，長這樣

在與公司紡織專業的同事溝通過后，了解到他們為了工作方便，還有一個掃碼槍，掃一下色卡或布料，就能得到色塊信息，神奇~

通過數小時的研究，總結出色卡上的關鍵信息有

類型含義

Color Nr.	潘通色號
Name	顏色名字
Book	在哪本色卡集
Page	在哪一頁
Row	在哪一行
Hex Code	16進制顏色值 (未印制在色卡上)
RGB	10進制顏色值 (未印制在色卡上)

參考的網站：

潘通·國際

潘通·中國

Torso

正文

一 、收集資料

1. 翻閱潘通·國際

在潘通·國際上看到有FIND A PANTONE COLOR，如果我猜得沒錯的話，這個可以查找官方提供的潘通色注冊免費賬號（不要錢的就是香）通過一番摸索，終于在Color選項找到了查找潘通色的入口設置到對應選項 FHI Paper TPG右側設置竟還能設置色塊布局(這個設計很友好嘛)看到上面結果的時候，我的內心狂喜，心想這需求很簡單嘛，馬上搞定。
BUT！很快我就發現，潘通官網在這里設置了障礙。F12查看網頁源代碼，并沒有發現關于任何關于色塊的html代碼，卒~好消息是無意間點擊色塊，在彈出框中選擇GET PHYSICAL SAMPLE，發現一個可以根據色號查詢色號信息的接口（https://www.pantone.com/connect/）

2. 翻閱潘通·中國

國際網找不到，那么就在潘通·中國上找尋PANTONE色彩查找TPG但只搜到了2310個結果，與色卡上的2625還差315個潘通色。
不過，有比沒有強，先把搜索到的內容格式化存儲到文本。F12查看網頁源代碼，找到色塊所在DOM，復制元素到txt文檔。

將字符串賦值到js文件中的一個變量分析html代碼，提取關鍵信息data-color-code、data-hex-code、style:background-color，這里用正則表達式最方便了

<script>const colorCodeRegx = /(data-color-code)=[^\s][^"]+/gi;const hexCodeRegx = /(data-hex-code)=[^\s>]+/gi;const colorRegx = /<div\s[^>]*style=\"([^">]+)\"[^>]*>/ig;const listOfColorCode = str.match(colorCodeRegx);const listOfHexCode = str.match(hexCodeRegx);const listOfColor = str.match(colorRegx);const listOfResult = listOfColor.map((item, index) => {return {color_code: listOfColorCode[index].match(/(?<=data-color-code\=").+/ig)[0],hex_code: listOfHexCode[index].match(/(?<=data-hex-code\=").+[^"]/ig)[0],rgb: item.match(/(?<=rgb\().+(?=\);")/ig)[0]}});console.log(JSON.stringify(listOfResult)); </script>

將匹配后的格式化文本粘貼到txt文檔。接下來就是考慮新增的那315個色號怎么整了。。。

3. 探索Torso

繼續搜索，一番操作后，發現一個神奇的網站Torso，竟然可以下載潘通色卡的目錄PDF。最最神奇的是該目錄包含2020年完整的2625個色號，以及新增哪些色號（綠色標注）。

二、分析現有資料

1. 我有什么？

2310個色號信息(來源：潘通·中國)、2625個色號的目錄(來源：Torso)、色號查詢接口(來源：潘通·國際)

2. 我能做什么？

將已有的2310個色號信息添加到對應目錄中；對于新增的315個色號，可以通過色號查詢接口按照色號進行查詢。

三、工程實施

1. 格式化2310個數據信息

public struct PantoneInfo {public string color_code;public string hex_code;public string rgb; } PantoneInfo[] pantoneInfos; public void ReadTPGColor() {using (FileStream fs = new FileStream("TPGColor2310.txt", FileMode.Open, FileAccess.Read)){StreamReader reader = new StreamReader(fs, Encoding.UTF8);pantoneInfos = JsonConvert.DeserializeObject<PantoneInfo[]>(reader.ReadLine().Trim());reader.Close();fs.Close();} }

2. 根據色號查詢信息

void GetColorFromRequest(string ColorNr, ref string hex_code, ref string rgb) {try{WebRequest request = WebRequest.Create("https://www.pantone.com/connect/" + ColorNr);WebResponse response = request.GetResponse();Stream receiveStream = response.GetResponseStream();StreamReader reader = new StreamReader(receiveStream, Encoding.UTF8);//獲取網頁源代碼string html = reader.ReadToEnd();reader.Close();receiveStream.Close();response.Close();int resultIndex = html.IndexOf("window.pageDataJson = ");int startIndex = html.IndexOf("{", resultIndex);int endIndex = html.IndexOf("};", startIndex);string jsonStr = html.Substring(startIndex, endIndex - startIndex + 1);JObject jsonData = JsonConvert.DeserializeObject(jsonStr) as JObject;JObject colorJsonData = JsonConvert.DeserializeObject(jsonData["color"].ToString()) as JObject;JObject hexJsonData = JsonConvert.DeserializeObject(colorJsonData["hex"].ToString()) as JObject;JObject rgbJsonData = JsonConvert.DeserializeObject(colorJsonData["rgb"].ToString()) as JObject;hex_code = hexJsonData["HTML"].ToString();rgb = $"{rgbJsonData["Red"]},{rgbJsonData["Green"]},{rgbJsonData["Blue"]}";}catch (Exception e){CLog.LogLine(CLog.LogType.Log, "");CLog.LogLine(CLog.LogType.Error, $"[ERROR] Get Nr.{ColorNr} Failed! -- {e.Message}");hex_code = "";rgb = "";} }

3. 數據化目錄pdf

將在Torso上下載的pdf文檔中的信息復制到txt文檔，分析文本格式，讀取已有的2310個色號信息，數據化目錄

public struct PantoneInfoWithPageRow {public string nr;public string name;public int book;public int page;public int row;public string hexCode;public string rgb; } List<PantoneInfoWithPageRow> pantoneInfoWithPageRows = new List<PantoneInfoWithPageRow>(2625); List<PantoneInfoWithPageRow> sorted; public void FormatOriginTxt() {string lineStr = "";using (FileStream readFS = new FileStream("PantoneColor.txt", FileMode.Open, FileAccess.Read)){StreamReader reader = new StreamReader(readFS, Encoding.UTF8);string ColorNr, Name, Book, Page, Row, HexCode = "", RGB = "", Update;int arrLen, index;string[] lineArray;string[] nameArray;CLog.LogLine(CLog.LogType.Log, $"-------------------------------------------------------");while (reader.Peek() != -1){ColorNr = Name = Book = Page = Row = HexCode = RGB = Update = "";arrLen = index = -1;lineArray = nameArray = null;lineStr = reader.ReadLine().Trim();if (!string.IsNullOrEmpty(lineStr)){lineArray = lineStr.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries);arrLen = lineArray.Length;ColorNr = lineStr.Substring(0, 19);ClearCurrentConsoleLine();CLog.Log(CLog.LogType.Log, $"Processing ColorNr: {ColorNr}");nameArray = new string[arrLen - 10];for (int i = 0; i < arrLen - 10; i++){nameArray[i] = lineArray[i + 3];}Name = CombineStringWithUpperFirst(" ", nameArray);Book = lineArray[arrLen - 7];Page = lineArray[arrLen - 6].Substring(2, 3);Row = lineArray[arrLen - 5];//1.New Color 2.No Change 3.New PageUpdate = CombineStringWithUpperFirst(" ", lineArray[arrLen - 2], lineArray[arrLen - 1]);//根據Update的值判斷如何對hexCode和rgb賦值if (Update.Equals("New Color")){//把色號傳入查詢接口GetColorFromRequest(ColorNr.Substring(8, 11), ref HexCode, ref RGB);}else{//根據色號取值index = FindColorInfoWithNr(ColorNr);if (index == -1){HexCode = "";RGB = "";}else{HexCode = pantoneInfos[index].hex_code;RGB = pantoneInfos[index].rgb;}}pantoneInfoWithPageRows.Add(new PantoneInfoWithPageRow(){nr = ColorNr,name = Name,book = int.Parse(Book),page = int.Parse(Page),row = int.Parse(Row),hexCode = HexCode,rgb = RGB});}}//關閉文件流reader.Close();readFS.Close();CLog.LogLine(CLog.LogType.Log, "");CLog.LogLine(CLog.LogType.Log, "-------------------------------------------------------");} } //根據色號在已有的2310個色號中查找信息 int FindColorInfoWithNr(string name) {for (int i = 0; i < pantoneInfos.Length; i++){if (name.Contains(pantoneInfos[i].color_code)){return i;}}return -1; } //連接字符串 “New”、“Color” --> “New Color” string CombineStringWithUpperFirst(string combineChar, params string[] str) {if (str.Length == 0){return "";}string tmp = "";for (int i = 0; i < str.Length - 1; i++){tmp += ToUpperFirst(str[i]) + combineChar;}tmp += ToUpperFirst(str[str.Length - 1]);return tmp; } //首字母大寫 unsafe string ToUpperFirst(string str) {if (str == null) return null;string ret = string.Copy(str);fixed (char* ptr = ret){*ptr = char.ToUpper(*ptr);}return ret; }

4. 對數據化的色號目錄進行排序（Book、Page、Row均由大到小）

List<PantoneInfoWithPageRow> sorted; public void PageSort() {int index = -1;int book = 2;int page = 200;int row = 7;int count = pantoneInfoWithPageRows.Count;sorted = new List<PantoneInfoWithPageRow>();for (int i = 0; i < count; i++){ClearCurrentConsoleLine();CLog.Log(CLog.LogType.Log, $"Processing Book: {book} Page: {page} Row: {row}");while (true){index = FindPageRowWithBook(book, page, row);if (index == -1){row--;if (row == 0){row = 7;page--;if (page == 0){page = 200;row = 7;book--;if (book == 0){break;}}}}else{break;}}if (index != -1){sorted.Add(pantoneInfoWithPageRows[index]);row--;if (row == 0){row = 7;page--;if (page == 0){row = 7;page = 200;book--;if (book == 0){break;}}}}}CLog.LogLine(CLog.LogType.Log, ""); }

5. 逆序后輸出最終文檔

public void WriteSortedFile() {using (FileStream writeFS = new FileStream("PantoneColorFormatPageRow.txt", FileMode.Create, FileAccess.Write)){StreamWriter writer = new StreamWriter(writeFS, Encoding.UTF8);writer.WriteLine(string.Format("{0,-13}{1,-25}{2,-20}{3,-10}{4,-10}{5,-10}{6,-10}{7,-10}", "Number", "Color Nr.", "Name", "Book", "Page", "Row", "Hex Code", "RGB"));int count = sorted.Count;sorted.Reverse();for (int i = 0; i < count; i++){writer.WriteLine(string.Format("No.{0,-10:D4}{1,-25}{2,-20}{3,-10}{3}.{4,-8:D3}{5,-10}{6,-10}{7,-10}",i + 1,sorted[i].nr,sorted[i].name,sorted[i].book,sorted[i].page,sorted[i].row,sorted[i].hexCode,sorted[i].rgb.Replace(" ", "")));}writer.Flush();writer.Close();writeFS.Close();CLog.LogLine(CLog.LogType.Log, "Write Over! Press Any Key To Continue!");} }

總結

遇到新需求還是不能太掉以輕心，應多收集資料，將資料匯總后，找到之前的關系，合理利用。

總結

以上是生活随笔為你收集整理的记一次制作潘通色卡TPG电子版的心路历程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。