本發(fā)明涉及計(jì)算機(jī)技術(shù)，特別涉及配色處理方法和裝置。

背景技術(shù)：
目前，很多服務(wù)網(wǎng)站中，每一套配色都要一一手動(dòng)生成，具體為：首先，手動(dòng)通過(guò)屏幕取色工具比如FastStoneCapture等將配色設(shè)計(jì)稿里的顏色值取出來(lái)，其中，配色設(shè)計(jì)稿通常格式為.PSD或者.PNG格式，其包含了背景色、文字色、鏈接色、邊框色等顏色標(biāo)注的視覺文件；之后，將取出來(lái)的顏色值填寫到CSS樣式的文件里。這種手動(dòng)配色的方式具有如下缺點(diǎn)：（1），費(fèi)時(shí)，比如現(xiàn)有21套配色，每套配色里有15個(gè)顏色值，如此就需要手動(dòng)提取21*15=315次。（2），手動(dòng)配色很容易出現(xiàn)手誤，且檢驗(yàn)成本很高。（3），維護(hù)成本高。當(dāng)某一套配色有修改時(shí)，就要對(duì)這套配色的所有取色點(diǎn)重新取色，再填寫到css樣式里。

技術(shù)實(shí)現(xiàn)要素：
本發(fā)明提供了配色處理方法，用于自動(dòng)配色，避免由于手工配色帶來(lái)的諸多缺點(diǎn)。本發(fā)明提供的技術(shù)方案包括：一種配色處理方法，包括：在配色樣式模板上預(yù)留出顏色值參數(shù)接口；從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息；針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值；利用各套配色下各個(gè)取色塊的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口并生成配色文件。一種配色處理裝置，包括：配置模塊，用于在配色樣式模板上預(yù)留出顏色值參數(shù)接口；位置獲取模塊，用于從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息；顏色值獲取模塊，用于針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值；文件生成模塊，用于利用各套配色下各個(gè)取色塊的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口并生成配色文件。由以上技術(shù)方案可以看出，本發(fā)明中，通過(guò)在配色樣式模板上預(yù)留出顏色值參數(shù)接口，從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息，針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值，以及利用各套配色下各個(gè)取色塊的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口并生成配色文件，這實(shí)現(xiàn)了自動(dòng)配色，相比于現(xiàn)有手工配色，避免由于手工配色帶來(lái)的諸多缺點(diǎn)。附圖說(shuō)明圖1為本發(fā)明實(shí)施例提供的方法流程圖；圖2為本發(fā)明實(shí)施例提供的配色樣式模板示意圖；圖3為本發(fā)明實(shí)施例提供的部分取色塊示意圖；圖4為本發(fā)明實(shí)施例提供的取色坐標(biāo)文件示意圖；圖5為本發(fā)明實(shí)施例提供的獲取部分取色塊的顏色值示意圖；圖6為本發(fā)明實(shí)施例提供的顏色對(duì)應(yīng)表文件示意圖；圖7為本發(fā)明實(shí)施例提供的CSS文件生成示意圖；圖8為本發(fā)明實(shí)施例提供的CSS文件示意圖；圖9為本發(fā)明實(shí)施例提供的方法示例流程圖；圖10為本發(fā)明實(shí)施例提供的裝置結(jié)構(gòu)圖。具體實(shí)施方式為了使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面結(jié)合附圖和具體實(shí)施例對(duì)本發(fā)明進(jìn)行詳細(xì)描述。本發(fā)明提供的方法主要包括圖1所示的流程：參見圖1，圖1為本發(fā)明實(shí)施例提供的方法流程圖。如圖1所示，該流程可包括以下步驟：步驟101，在配色樣式模板上預(yù)留出顏色值參數(shù)接口。作為本發(fā)明的一種舉例，步驟101中的顏色值參數(shù)接口可具有以下格式：%配色名標(biāo)識(shí)%。其中，配色名標(biāo)識(shí)可為配色設(shè)計(jì)稿中配色的標(biāo)識(shí)，可預(yù)先被定義，比如，B1表示取色塊的背景色、B4表示側(cè)欄背景色等?；谏厦驷槍?duì)顏色值參數(shù)接口格式的描述，則執(zhí)行完步驟101后，配色樣式模板可通過(guò)圖2所示。其中，圖2中用粗線框標(biāo)出了顏色值參數(shù)接口。需要說(shuō)明的是，本發(fā)明中，步驟101可根據(jù)配色設(shè)計(jì)稿中的實(shí)際配色預(yù)留出顏色值參數(shù)接口，但并不額外限定顏色值參數(shù)接口出現(xiàn)的次數(shù)，比如，同一個(gè)顏色值參數(shù)接口可出現(xiàn)多次。步驟102，從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息。其中，配色設(shè)計(jì)稿中各個(gè)取色塊是依據(jù)預(yù)先與設(shè)計(jì)該配色設(shè)計(jì)稿的設(shè)計(jì)師約定好的取色區(qū)域規(guī)范定義的，圖3示出了部分取色塊的示意圖。優(yōu)選地，本發(fā)明中，取色塊的位置信息可通過(guò)取色塊在配色設(shè)計(jì)稿中的坐標(biāo)表示。還有，為了便于執(zhí)行后續(xù)的步驟，本步驟102可將獲取的每一取色塊的位置信息暫時(shí)存放在一個(gè)文件中。以取色塊的位置信息用該取色塊在配色設(shè)計(jì)稿中的坐標(biāo)為例，則本步驟102可將獲取的每一取色塊的坐標(biāo)暫時(shí)存放在取色坐標(biāo)文件中。圖4示出了取色坐標(biāo)文件的示意圖，該取色坐標(biāo)文件名稱為pickcolor_config.txt，其包含了圖3所示的部分取色塊的坐標(biāo)。步驟103，針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值。通常，一個(gè)配色設(shè)計(jì)稿中包含多套配色，本發(fā)明針對(duì)每一套配色，都執(zhí)行步驟103中的獲取操作。圖5示出了針對(duì)某一套配色獲取的該套配色下部分取色塊的顏色值。步驟104，利用各套配色下各個(gè)取色塊的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口并生成配色文件。優(yōu)選地，作為本發(fā)明實(shí)施例的一種擴(kuò)展，步驟105可通過(guò)以下方式實(shí)現(xiàn)：A，將所述配色設(shè)計(jì)稿中每一套配色下各個(gè)取色塊的顏色值復(fù)制至顏色對(duì)應(yīng)表文件中；B，利用所述顏色對(duì)應(yīng)表文件中的顏色值對(duì)應(yīng)替換所述配色樣式模板中顏色值參數(shù)接口，以生成對(duì)應(yīng)的配色文件。優(yōu)選地，基于本發(fā)明配色樣式模板中預(yù)留出的顏色值參數(shù)接口，本發(fā)明中的顏色對(duì)應(yīng)表文件相比于現(xiàn)有技術(shù)中的顏色對(duì)應(yīng)表文件，額外增加了配色樣式模板預(yù)留的顏色值參數(shù)接口。優(yōu)選地，該預(yù)先存儲(chǔ)的顏色值參數(shù)接口處于所述顏色對(duì)應(yīng)表文件的同一列，具體如圖6所示的B列?；诖?，上述的步驟A包括：將所述配色設(shè)計(jì)稿中同一套配色下各個(gè)取色塊的顏色值依次復(fù)制至顏色對(duì)應(yīng)表文件的同一列中，而所述配色設(shè)計(jì)稿中不同套配色下各個(gè)取色塊的顏色值依次復(fù)制至顏色對(duì)應(yīng)表文件的不同列中，具體如圖6所示的C至E列。同樣，上述的步驟B具體可包括：從所述顏色對(duì)應(yīng)表文件中提取出每一列的顏色值；針對(duì)提取出的每一顏色值，執(zhí)行以下步驟：確定所述顏色對(duì)應(yīng)表文件中與該顏色值處于同一行的顏色值參數(shù)接口，定位出所述配色樣式模板中與該確定的顏色值參數(shù)接口相同的顏色值參數(shù)接口，將該顏色值替換該定位出的顏色值參數(shù)接口，以生成對(duì)應(yīng)的配色文件。需要說(shuō)明的是，本發(fā)明中，配色文件可為一些格式為.CSS的文件。另外，步驟B具體針對(duì)每一顏色值執(zhí)行的步驟可通過(guò)現(xiàn)有的重構(gòu)輔助工具CssGaga實(shí)現(xiàn)。其中，CssGaga是基于朋友網(wǎng)日常的重構(gòu)工作流程開發(fā)出來(lái)的，其具有很多優(yōu)點(diǎn)，比如優(yōu)化、壓縮CSS代碼，減少帶寬占用，加快下載速度等。其中，CssGaga中存在一個(gè)功能選項(xiàng)，稱為“皮膚1toN”選項(xiàng)，該“皮膚1toN”是CssGaga生成和維護(hù)多套配色的一個(gè)功能，具體為：通過(guò)一套包含顏色值參數(shù)接口的配色樣式模板（即上述步驟101中的配色樣式模塊）和一個(gè)包含替換規(guī)則的顏色對(duì)應(yīng)表文件（其格式可為skin.csv），把配色樣式模板里的顏色值參數(shù)接口替換成顏色對(duì)應(yīng)表文件里對(duì)應(yīng)的顏色值，并且按照該顏色值所處的文件名標(biāo)識(shí)（ID）生成“ID.css”文件。圖7示出了利用CssGaga中的“皮膚1toN”，并結(jié)合上述的顏色對(duì)應(yīng)表文件和上述的配色樣式模板生成CSS文件的示意圖。具體為：使能CssGaga中的“皮膚1toN”比如勾選出CssGaga中的“皮膚1toN”，將配色樣色模板拖入至CssGaga的頁(yè)面，由該CssGaga中的“皮膚1toN”將上述的顏色對(duì)應(yīng)表文件中的參數(shù)值對(duì)應(yīng)替換配色樣色模板中的顏色值參數(shù)接口，即可形成圖8所示的CSS文件。其中，圖8所示的0.CSS文件，其為配色樣式模板對(duì)應(yīng)的CSS文件，其余的CSS文件都為屬于該0.CSS文件的CSS文件。比如，以圖6所示的顏色對(duì)應(yīng)表中文件名為33所在的列為例，則使能圖7所示CssGaga中的“皮膚1toN”比如勾選出CssGaga中的“皮膚1toN”，將配色樣色模板拖入至CssGaga的頁(yè)面，由該CssGaga中的“皮膚1toN”將圖6所示顏色對(duì)應(yīng)表中文件名為33所在的列中的參數(shù)值對(duì)應(yīng)替換配色樣色模板中的顏色值參數(shù)接口，即可形成圖8所示的33.CSS文件。至此，完成圖1所示的流程。需要說(shuō)明的是，本發(fā)明中，在實(shí)現(xiàn)上述方法時(shí)，可需要對(duì)本發(fā)明應(yīng)用的瀏覽器進(jìn)行限定，其中，本發(fā)明所應(yīng)用的瀏覽器可為支持HTML5的標(biāo)準(zhǔn)瀏覽器，比如Firefox、Chrome等。下面以采用CssGaga對(duì)實(shí)現(xiàn)圖1所示流程舉例描述。該舉例只是為實(shí)現(xiàn)圖1所示流程的一種示例，并非限定本發(fā)明。參見圖9，圖9為本發(fā)明實(shí)施例提供的方法示例流程圖。圖9以上述取色塊的位置信息為取色塊的坐標(biāo)且存放至取色坐標(biāo)文件為例。則，如圖9所示，該流程可包括以下步驟：步驟901，導(dǎo)入取色坐標(biāo)文件。本步驟901具體可為：在本發(fā)明啟動(dòng)時(shí)，將取色坐標(biāo)文件導(dǎo)入到瀏覽器中。其中，本發(fā)明可通過(guò)jquery的方法將取色坐標(biāo)文件導(dǎo)入到瀏覽器中；并且，還需要將該取色坐標(biāo)文件轉(zhuǎn)換成一個(gè)json對(duì)象，這個(gè)json對(duì)象包含了取色塊坐標(biāo)的序列。在本步驟901中，該取色塊坐標(biāo)的序列會(huì)暫存起來(lái)，為后面的取色提供坐標(biāo)數(shù)據(jù)。步驟902，導(dǎo)入配色設(shè)計(jì)稿。本步驟902具體可為：直接將設(shè)計(jì)稿拖入到瀏覽器中，通過(guò)HTML5的datatransfer方法，將配色設(shè)計(jì)稿轉(zhuǎn)換成一個(gè)base64格式的長(zhǎng)字符串（稱為base64字符串），這個(gè)base64字符串將包含這個(gè)配色設(shè)計(jì)稿的全部信息。步驟903，生成一個(gè)圖片（image對(duì)象）。本步驟903可通過(guò)js的方法聲明一個(gè)image對(duì)象，并將步驟902中獲得的base64字符串賦予image的url屬性。在將步驟902中獲得的base64字符串賦予image的url屬性后，就能得到一個(gè)跟domtree中一樣的image對(duì)象。步驟904，將步驟903得到的image對(duì)象繪制到HTML5的canvas中，然后通過(guò)canvas的getImageData方法，從步驟902導(dǎo)入的配色設(shè)計(jì)稿中獲取步驟901中各個(gè)取色塊坐標(biāo)的顏色值，并輸出到瀏覽器中。步驟905，把獲取的顏色值復(fù)制到顏色對(duì)應(yīng)表文件的對(duì)應(yīng)列中。本步驟905中的復(fù)制在上文步驟104中已經(jīng)詳細(xì)描述，這里不再贅述。步驟906，利用CssGaga整合編譯并且生成CSS文件。步驟906的具體操作見上文描述。事實(shí)上，本步驟1006生成的CSS文件是配色樣式模板的一個(gè)副本，只不過(guò)是將配色樣式模板中的顏色值參數(shù)接口被賦予了真正的顏色值。至此，完成圖9所示的流程。從圖1或圖9所示的流程可以看出，本發(fā)明能夠?qū)崿F(xiàn)自動(dòng)配色，無(wú)需現(xiàn)有手工配色，進(jìn)而避免現(xiàn)有手工配色帶來(lái)的缺陷。以上對(duì)本發(fā)明提供的方法進(jìn)行描述，下面對(duì)本發(fā)明提供的裝置進(jìn)行描述：參見圖10，圖10為本發(fā)明實(shí)施例提供的裝置結(jié)構(gòu)圖。如圖10所示，該裝置包括：配置模塊，用于在配色樣式模板上預(yù)留出顏色值參數(shù)接口；位置獲取模塊，用于從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息；顏色值獲取模塊，用于針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值；文件生成模塊，用于利用各套配色下各個(gè)取色塊的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口并生成配色文件。優(yōu)選地，所述取色塊的位置信息通過(guò)取色塊在配色設(shè)計(jì)稿中的坐標(biāo)表示。如圖10所示，所述文件生成模塊可包括：復(fù)制子模塊，用于將所述配色設(shè)計(jì)稿中每一套配色下各個(gè)取色塊的顏色值復(fù)制至顏色對(duì)應(yīng)表文件中；文件生成子模塊，用于利用所述顏色對(duì)應(yīng)表文件中的顏色值對(duì)應(yīng)替換所述配色樣式模板中顏色值參數(shù)接口，以生成對(duì)應(yīng)的配色文件。優(yōu)選地，本發(fā)明中，所述顏色對(duì)應(yīng)表文件預(yù)先存儲(chǔ)了所述配色樣式模板預(yù)留的顏色值參數(shù)接口，該預(yù)先存儲(chǔ)的顏色值參數(shù)接口處于所述顏色對(duì)應(yīng)表文件的同一列；基于此，所述復(fù)制子模塊用于將所述配色設(shè)計(jì)稿中同一套配色下各個(gè)取色塊的顏色值依次復(fù)制至顏色對(duì)應(yīng)表文件的同一列中，而所述配色設(shè)計(jì)稿中不同套配色下各個(gè)取色塊的顏色值依次復(fù)制至顏色對(duì)應(yīng)表文件的不同列中。同樣，基于所述顏色對(duì)應(yīng)表文件預(yù)先存儲(chǔ)的顏色值參數(shù)接口，如圖10所示，所述文件生成子模塊可包括：提取單元，用于從所述顏色對(duì)應(yīng)表文件中提取出每一列的顏色值；處理單元，用于針對(duì)提取出的每一顏色值，執(zhí)行以下步驟：確定所述顏色對(duì)應(yīng)表文件中與該顏色值處于同一行的顏色值參數(shù)接口，定位出所述配色樣式模板中與該確定的顏色值參數(shù)接口相同的顏色值參數(shù)接口，將該顏色值替換該定位出的顏色值參數(shù)接口，以生成對(duì)應(yīng)的配色文件。至此，完成圖10所示的裝置結(jié)構(gòu)圖。由以上技術(shù)方案可以看出，本發(fā)明中，通過(guò)在配色樣式模板上預(yù)留出顏色值參數(shù)接口，從配色設(shè)計(jì)稿中獲取各個(gè)取色塊的位置信息，針對(duì)所述配色設(shè)計(jì)稿中每一套配色，依據(jù)每一取色塊的位置信息獲取該取色塊在該套配色下的顏色值，以及利用各套配色下的顏色值自動(dòng)替換所述配色樣式模板中顏色值參數(shù)接口生成配色文件，這實(shí)現(xiàn)了自動(dòng)配色，相比于現(xiàn)有手工配色，避免由于手工配色帶來(lái)的諸多缺點(diǎn)。以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所做的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明保護(hù)的范圍之內(nèi)。