用于將視覺稿源文件生成html標(biāo)記的方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明涉及一種用于將視覺稿源文件生成HTML標(biāo)記的方法及系統(tǒng)。所述方法包括：使用解析器解析視覺稿源文件的圖層；基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層；選擇用于生成HTML標(biāo)記的規(guī)則，所述規(guī)則包括從具有多種頁面模板的可配置模版方案中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)；以及根據(jù)所述規(guī)則，將所述有效圖層生成HTML標(biāo)記。
【專利說明】用于將視覺稿源文件生成HTML標(biāo)記的方法及系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本申請涉及圖像文件處理領(lǐng)域，尤其涉及一種用于將視覺稿源文件生成HTML標(biāo)記的方法及系統(tǒng)。
【背景技術(shù)】
[0002]視覺稿就是通常所說的PSD文件，PSD文件是指adobe photoshop專用的圖像文件格式，是目前唯一能夠支持全部圖像色彩模式的格式。PSD文件體積龐大，雖然在大部分平面設(shè)計軟件(例如Adobe Illustrator、After Effect、Corel DRAW等)內(nèi)部可以通用，但是PSD格式的圖像文件很少被平面設(shè)計軟件以外的其它軟件和工具所支持。所以，在圖像制作完成后，通常需要將PSD文件轉(zhuǎn)化為一些比較通用的圖像格式(例如jpg格式等)的文件，以便于將其輸出到其它軟件中繼續(xù)編輯。
[0003]目前，由于網(wǎng)頁設(shè)計的需求，促進(jìn)了 PSD2HTML相關(guān)技術(shù)的發(fā)展。PSD2HTML是指通過計算機(jī)(非人為地)解析PSD文件而生成HTML標(biāo)記的過程。國際上關(guān)于PSD2HTML的網(wǎng)站很多，不過目前絕大多數(shù)的網(wǎng)站仍然是通過人工代碼的模式來實現(xiàn)，也有通過服務(wù)器程序?qū)SD文件直接轉(zhuǎn)化為HTML文件的網(wǎng)站。例如，俄羅斯互聯(lián)網(wǎng)廠商的Psd2HtmlConverter網(wǎng)站(http://Psd2HtmlConverter.com/),從官方網(wǎng)站的“文檔”部分了解到該網(wǎng)站主要采用約定名稱的方式來識別特殊的頁面元素要求。約定名稱是指可被系統(tǒng)識別的PSD文件中圖層屬性字段。部分HTML標(biāo)記的約定方式如圖1所示。但是，Psd2HtmlConverter網(wǎng)站提供的技術(shù)存在以下問題。首先，Psd2htmlconverter的技術(shù)采用完全服務(wù)器端的語言生成,客戶端需要將PSD文件提交到服務(wù)器進(jìn)行轉(zhuǎn)化操作，而一個普通的PSD文件的大小通常是幾十M到幾百M，如果在大量的轉(zhuǎn)化操作并發(fā)的情況下，網(wǎng)絡(luò)帶寬和服務(wù)器的實時壓力會比較大，將導(dǎo)致轉(zhuǎn)化效率降低。其次，Psd2htmlconverter的技術(shù)不支持頁面交互(即javascript交互)，而在現(xiàn)代互聯(lián)網(wǎng)的應(yīng)用中javascript交互的應(yīng)用甚至可以說是網(wǎng)頁必備的能力。再有，Psd2htmlconverter的技術(shù)采用嚴(yán)格的XHTML規(guī)范來生成頁面,主體采用div布局,雖然該技術(shù)應(yīng)用在瀏覽器網(wǎng)頁中非常合適，但是在郵件頁面的開發(fā)中將完全失效。

【發(fā)明內(nèi)容】

[0004]本申請的主要目的在于提供一種將視覺稿源文件生成HTML標(biāo)記的方法及系統(tǒng)，以解決現(xiàn)有技術(shù)存在的在大量的轉(zhuǎn)化操作并發(fā)的情況下轉(zhuǎn)化效率降低、不支持頁面交互、不適用于郵件頁面的開發(fā)等問題，其中:
[0005]本申請?zhí)峁┑囊环N用于將視覺稿源文件生成HTML標(biāo)記的方法，包括:使用解析器解析視覺稿源文件的圖層；基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層；選擇用于生成HTML標(biāo)記的規(guī)則；以及根據(jù)所述規(guī)則，將所述有效圖層生成HTML標(biāo)記。
[0006]根據(jù)本申請的實施例，該方法還包括:基于解析結(jié)果過濾無效圖層。
[0007]根據(jù)本申請的實施例，在該方法中，所述基于解析結(jié)果過濾無效圖層的步驟進(jìn)一步包括:根據(jù)圖層的屬性去除不可見圖層；以及根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層。
[0008]根據(jù)本申請的實施例，在該方法中，所述有效圖層還包括一個或多個圖層組，將每一圖層組作為整體進(jìn)行標(biāo)記，以使視覺稿中的圖層組的結(jié)構(gòu)與HTML標(biāo)記的結(jié)構(gòu)相匹配。
[0009]根據(jù)本申請的實施例，在該方法中，所述規(guī)則包括:從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)。
[0010]根據(jù)本申請的實施例，在該方法中，所述規(guī)則還包括:確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系。
[0011]根據(jù)本申請的實施例，在該方法中，所述確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系通過使用約定名稱對所述有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。
[0012]根據(jù)本申請的實施例，在該方法中，所述頁面模板包括布局方式、圖像展示方式、文本排版方式。
[0013]根據(jù)本申請的實施例,該方法還包括:將所生成的HTML標(biāo)記存儲為文本文件或者將所生成的HTML標(biāo)記發(fā)送到客戶端。
[0014]在本申請的另一方面，提供一種用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)，包括:解析模塊，其用于使用解析器解析視覺稿源文件的圖層；獲取模塊，其用于基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層；選擇模塊，其用于選擇用于生成HTML標(biāo)記的規(guī)則；以及生成模塊，其用于根據(jù)所述規(guī)則將所述有效圖層生成HTML標(biāo)記。
[0015]根據(jù)本申請的實施例，該系統(tǒng)還包括:過濾模塊，其用于基于解析結(jié)果過濾無效圖層。
[0016]根據(jù)本申請的實施例，在該系統(tǒng)中，所述過濾模塊進(jìn)一步包括:第一去除模塊，其用于根據(jù)圖層的屬性去除不可見圖層；以及第二去除模塊，其用于根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層。
[0017]根據(jù)本申請的實施例，在該系統(tǒng)中，所述有效圖層還包括一個或多個圖層組，所述系統(tǒng)還包括標(biāo)記模塊，其用于將每一圖層組作為整體進(jìn)行標(biāo)記，以使視覺稿中的圖層組的結(jié)構(gòu)與HTML標(biāo)記的結(jié)構(gòu)相匹配。
[0018]根據(jù)本申請的實施例，在該系統(tǒng)中，所述規(guī)則包括從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)。
[0019]根據(jù)本申請的實施例，在該系統(tǒng)中，所述規(guī)則還包括:確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系。
[0020]根據(jù)本申請的實施例，在該系統(tǒng)中，所述確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系通過使用約定名稱對所述有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。
[0021]根據(jù)本申請的實施例，在該系統(tǒng)中，所述頁面模板包括布局方式、圖像展示方式、文本排版方式。
[0022]根據(jù)本申請的實施例，該系統(tǒng)還包括:處理模塊，其用于將所生成的HTML標(biāo)記存儲為文本文件或者將所生成的HTML標(biāo)記發(fā)送到客戶端。
[0023]與現(xiàn)有技術(shù)相比，根據(jù)本申請的技術(shù)方案，能獲得如下效果。
[0024](I) Psd2htmlconverter采用完全服務(wù)端的語言生成，客戶端需要提交PSD文件到服務(wù)器設(shè)備進(jìn)行轉(zhuǎn)化操作，而一個普通的PSD文件通常要幾十兆到幾百兆大小，如果大量并發(fā)的應(yīng)用，網(wǎng)絡(luò)帶寬和服務(wù)器的實時壓力會比較大。相對于此，本申請使用完全javascript語言完成，可以在客戶端完成大部分轉(zhuǎn)化操作，減少服務(wù)器壓力并提高轉(zhuǎn)化效率。
[0025](2)目前Psd2htmlconverter不支持頁面交互(javascript),而在現(xiàn)代互聯(lián)網(wǎng)應(yīng)用中javascript交互應(yīng)用甚至可以說是網(wǎng)頁必備的能力。相對于此,本申請將采用約定名稱的方式實現(xiàn)常用的javascript交互，以使生成的網(wǎng)頁具備javascript交互能力。
[0026](3) Psd2htmlconverter采用嚴(yán)格的xhtml規(guī)范生成頁面,主體采用div布局,雖然應(yīng)用在瀏覽器網(wǎng)頁中非常合適，但是在郵件頁面開發(fā)中將完全失效。相對于此，本申請在生成HTML標(biāo)記的過程中將采用可配置模板方案，可根據(jù)不同的HTML需求來完成生成標(biāo)記的過程。
【專利附圖】

【附圖說明】
[0027]此處所說明的附圖用來提供對本申請的進(jìn)一步理解，構(gòu)成本申請的一部分，本申請的示意性實施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當(dāng)限定。在附圖中:
[0028]圖1是表示現(xiàn)有技術(shù)中涉及的基于約定名稱方式的部分HTML標(biāo)記的對照圖；
[0029]圖2是表示本申請實施例的基于將視覺稿源文件生成HTML標(biāo)記的方法的流程圖；
[0030]圖3是表示圖2中的步驟S202涉及的具體流程圖；
[0031]圖4A?圖4C是表示本申請實施例的頁面模板中包含的布局方式的示意圖；
[0032]圖5是表示本申請實施例的用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)的示意圖；
[0033]圖6是表示適于用來實現(xiàn)本申請實施方式的計算機(jī)系統(tǒng)的框圖；
[0034]圖7是表示本申請實施例的與標(biāo)記圖層組相關(guān)的示例。
【具體實施方式】
[0035]本申請的主要思想在于,通過對使用photoshop軟件生成的PSD文件進(jìn)行解析,并基于可配置模版方案生成需要的HTML標(biāo)記后直接應(yīng)用于瀏覽器頁面、郵件頁面等。換句話說，本申請是基于前端技術(shù)javascript語言實現(xiàn)的，需要通過解析器解析已加載的PSD文件來獲取group (組)、layer (層)等的模塊信息，并根據(jù)這些模塊信息分析得出圖層的可見性、分組、組合屬性等信息，從而創(chuàng)建符合HTML規(guī)范的標(biāo)準(zhǔn)HTML文本，其中解析器可以是PSD.js解析器。所述的可配置模版方案是指，在將PSD文件生成HTML標(biāo)記時所提供的可供選擇的用于生成HTML標(biāo)記的規(guī)則。該可配置模版方案中包括選擇頁面模板、確定PSD文件中的圖層對象與HTML標(biāo)記的映射關(guān)系等。換句話說，確定PSD文件中的圖層對象與HTML標(biāo)記的映射關(guān)系即是確定單個圖層與HTML標(biāo)記之間的映射關(guān)系以及圖層組與HTML標(biāo)記之間的映射關(guān)系。
[0036]為使本申請的目的、技術(shù)方案和優(yōu)點更加清楚，以下結(jié)合附圖及具體實施例，對本申請作進(jìn)一步地詳細(xì)說明。
[0037]根據(jù)本申請的實施例，提供了一種用于將視覺稿源文件生成HTML標(biāo)記的方法。[0038]圖2是本申請實施例的用于將視覺稿源文件生成HTML標(biāo)記的方法的流程圖。下面，結(jié)合圖2來詳細(xì)說明將視覺稿源文件生成HTML標(biāo)記的方法。
[0039]在步驟S201中，使用解析器解析視覺稿源文件的圖層。在此，視覺稿源文件是指使用photoshop軟件生成的PSD文件。也就是說，使用PSD.js解析器對PSD文件進(jìn)行解析，就能解析出group、layer等模塊信息,然后通過group、layer等模塊信息就能得到PSD文件中的各圖層的屬性、層級關(guān)系、透明程度、圖像大小、顏色方式等這些信息。
[0040]在步驟S202中，基于解析結(jié)果過濾無效圖層。也就是說，根據(jù)解析PSD文件而得到的圖層的屬性等信息來過濾無效圖層。無效圖層主要包括屬性上不可見的圖層和位置上不可見的圖層這兩部分。因此，需要通過執(zhí)行如圖3所示的步驟S301和步驟S302來完成無效圖層的過濾。也就是說，步驟S202可以進(jìn)一步包括用于去除屬性上不可見的圖層的步驟S301和用于去除位置上不可見的圖層的步驟S302。具體來說，在步驟S301中，根據(jù)圖層的屬性去除不可見圖層(即屬性上不可見圖層)。在步驟S302中，根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層(即位置上不可見的圖層，亦是層級較低的圖層)。另一方面，在PSD文件不存在無效圖層的情況下，也可以省略過濾無效圖層(步驟S202)這一步驟。
[0041]在步驟S203中，基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層。也就是說，在過濾掉無效圖層以后，根據(jù)圖層的屬性等信息可以獲得包含一個或多個單個圖層的有效圖層。另外，該有效圖層還可能包含一個或多個圖層組。該圖層組是指將若干單個圖層合并而成的上一級圖層組。如果單個圖層適合直接生成簡單的HTML標(biāo)記，則在解析PSD文件完成以后，已經(jīng)可以直接獲取圖層的信息，這相當(dāng)于已經(jīng)完成了標(biāo)記，不需要進(jìn)行額外的邏輯處理。即，除圖層組之外的單個圖層通?？梢灾苯由蒆TML標(biāo)記，不需要進(jìn)行額外的處理。相對于此，由于PSD源文件中出現(xiàn)的大多數(shù)單個圖層(即構(gòu)成圖層組的單個圖層)不適合直接對應(yīng)地生成HTML標(biāo)記，例如如圖7所示，在PSD文件中的“haol23.com”從顏色(雖然在圖7中未示出，但該文字具有顏色)和字體可以判斷出其至少包含“haol23”、“.com”以及顏色這三個圖層，而且“haol23.com”還具有樹葉等背景圖片元素。在使用這種圖片生成HTML標(biāo)記時，只需要通過它們的上一級圖層組生成完整的背景圖片即可，所以在生成頁面可用元素之前需要以組為單位進(jìn)行標(biāo)記。另外，對于非圖片類型的圖層組，也存在類似的問題，當(dāng)處于同一圖層組的多個文案的圖層具有相似屬性的時候，也可以作為一個整體來處理。因此，在有效圖層既包含單個圖層又包含圖層組的情況下需要執(zhí)行步驟S204。SP，在步驟S204中，可以將每一圖層組作為一個整體進(jìn)行標(biāo)記，以使PSD文件中的圖層組的結(jié)構(gòu)與要生成的HTML標(biāo)記的結(jié)構(gòu)盡量匹配。在此，使PSD文件中的圖層組的結(jié)構(gòu)與要生成的HTML標(biāo)記的結(jié)構(gòu)相匹配的原因在于，PSD文件作為傳達(dá)視覺設(shè)計者設(shè)計思想的直接表現(xiàn)，不僅在視覺上，在結(jié)構(gòu)上也有明確的體現(xiàn)，而HTML標(biāo)記本質(zhì)上是文本，因而在結(jié)構(gòu)上使PSD文件中的圖層組匹配合適的HTML結(jié)構(gòu)，便于保留視覺設(shè)計初衷。另外，這里的“匹配”只能是盡量匹配，而不可能做到完全匹配。其原因是，PSD文件是設(shè)計用于網(wǎng)頁/印刷/多媒體等多領(lǐng)域的圖像應(yīng)用，在設(shè)計用于生成網(wǎng)頁的PSD文件時，除了支持簡單的文檔類型，還可以對圖像進(jìn)行如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等這樣的各種變換。此外，也可以進(jìn)行去除斑點、修補(bǔ)、修飾圖像的殘損等。而HTML被稱作是超文本標(biāo)記語言，本質(zhì)上還是文本，不能夠體現(xiàn)全部圖像效果。因此，只能使PSD文件中的圖層組的結(jié)構(gòu)與要生成的HTML標(biāo)記的結(jié)構(gòu)盡量匹配。當(dāng)然，在有效圖層不包含圖層組的情況下，可以省略上述的標(biāo)記圖層組(步驟S204)的步驟。
[0042]在步驟S205中，選擇用于生成HTML標(biāo)記的規(guī)則。具體來說，所述用于生成HTML標(biāo)記的規(guī)則包括從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)；以及確定單個圖層與HTML標(biāo)記之間的映射關(guān)系以及圖層組與HTML標(biāo)記之間的映射關(guān)系等。
[0043]首先，需要選擇頁面模板，而針對不同的頁面模板可以配置不同的參數(shù)。例如，頁面模板可以包括布局方式、圖像展示方式、文本排版方式等。其中，布局方式如圖4A~圖4C所示那樣，可以包括左中右布局、上左右布局、瀑布流布局等。圖像展示方式可以包括僅展示圖片、將圖片作為背景來展示、以及將圖片和背景混合展示這三種情況，但在郵件中通常不能使用背景而需要直接使用圖片。文本排版方式可以包括文本對齊、段落設(shè)置等。由于布局、圖像展示、文本排版等方式均包含不同的參數(shù)，所以可以通過在模板中配置這些參數(shù)來確定頁面的整體風(fēng)格。
[0044]其次，確定單個圖層與HTML標(biāo)記之間的映射關(guān)系以及圖層組與HTML標(biāo)記之間的映射關(guān)系即是確定PSD文件中的圖層對象與HTML標(biāo)記的映射關(guān)系。具體來說，單個圖層與HTML標(biāo)記之間的映射關(guān)系是指單個圖層適合直接生成簡單的HTML標(biāo)記的關(guān)系。例如，在PSD文件的圖層中帶下劃線的文字圖層對應(yīng)于HTML標(biāo)記中的鏈接A標(biāo)簽；PSD文件中的確定大小的矩形框?qū)?yīng)于HTML標(biāo)記中的輸入框INPUT標(biāo)簽。而圖層組與HTML標(biāo)記之間的映射關(guān)系是指圖層之間的關(guān)系反映到HTML標(biāo)記的關(guān)系。例如，圖層組A中包含具有相似屬性的A1、A2、A3、A4這四個單個圖層(或圖層組)，在生成HTML標(biāo)記時，將生成圖層組A所對應(yīng)的A標(biāo)記的ol標(biāo)簽中的四個Ii標(biāo)簽，即這四個Ii標(biāo)簽分別對應(yīng)于圖層A1、A2、A3、A4。另外，對于如何確定單個圖層(或 圖層組)與HTML標(biāo)記之間的映射關(guān)系，例如圖層組與HTML標(biāo)記之間的映射關(guān)系可以規(guī)定為已合并的圖層組是否生成為單個的HTML標(biāo)記；或者，也可以規(guī)定為已合并的圖層組是否生成為分解而成的多個HTML標(biāo)記。優(yōu)選的是，確定PSD文件中的圖層對象與HTML標(biāo)記的映射關(guān)系可以通過使用約定名稱對有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。具體來說,PSD文件中的圖層或圖層組是可以命名的,約定名稱就是指獲取并判斷在圖層(或圖層組)的名稱中的出現(xiàn)的特殊字符串。例如，在某個圖層的名稱上加入表示通過標(biāo)記當(dāng)前圖層來生成img標(biāo)簽，#input [id=mible, class=mible] #表示在生成的input標(biāo)簽中添加屬性id=mible, class=mible。如果事先在模板方案中已經(jīng)針對該id元素提供javascript交互動作,例如:
[0045]
document.getEiementBy Id(tITiiblej)-Onbiur = function() {
if(!(7A\d{ 11 }S/.test(this.value))){
alert(cwrong num!，);this.focus();
[0046]
}
}
[0047]那么，在圖層的名稱上加入#input[id=mible, class=mible]#,這樣生成的input標(biāo)簽就具有一個簡單的交互行為，當(dāng)失去焦點的時候，如果輸入值不是11位的數(shù)字將出現(xiàn)錯誤提示。在這種情況下，若將使用本方法所生成的HTML標(biāo)記應(yīng)用于網(wǎng)頁時就使得網(wǎng)頁具備javascript交互能力。
[0048]在步驟S206中，根據(jù)所述規(guī)則將有效圖層生成HTML標(biāo)記。由此，完成用于將視覺稿源文件生成HTML標(biāo)記的流程。
[0049]但是，有時需要根據(jù)客戶端的需求對所生成的HTML標(biāo)記進(jìn)行步驟S207的處理。即，在步驟S207中，將所生成的HTML標(biāo)記存儲為文本文件或者將所生成的HTML標(biāo)記發(fā)送到客戶端。當(dāng)然，此步驟S207也可以省略。
[0050]根據(jù)本申請的實施例，還提供一種用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)。
[0051]圖5是表示本申請實施例的用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)500的示意圖。
[0052]如圖5所示，用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)500可以包括解析模塊501、過濾模塊502、獲取模塊503、標(biāo)記模塊504、選擇模塊505、生成模塊506以及處理模塊507。
[0053]解析模塊501可以被配置成使用解析器解析視覺稿源文件的圖層。
[0054]過濾模塊502可以被配置成基于解析結(jié)果過濾無效圖層。另外，在PSD文件不存在無效圖層的情況下，該系統(tǒng)500也可以省略過濾模塊502。
[0055]另外，過濾模塊502可以進(jìn)一步包括第一去除模塊511和第二去除模塊512。第一去除模塊511可以被配置成根據(jù)圖層的屬性去除不可見圖層。第二去除模塊512可以被配置成根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層。
[0056]獲取模塊503可以被配置成基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層。
[0057]另外，該有效圖層可以還包括一個或多個圖層組，在這種情況下，所述系統(tǒng)可以還包括標(biāo)記模塊504，該標(biāo)記模塊504可以被配置成將每一圖層組作為整體進(jìn)行標(biāo)記，以使視覺稿中的圖層組的結(jié)構(gòu)與HTML標(biāo)記的結(jié)構(gòu)相匹配。當(dāng)然，在有效圖層僅包含單個圖層的情況下，該系統(tǒng)500可以省略標(biāo)記模塊504。
[0058]選擇模塊505可以被配置成選擇用于生成HTML標(biāo)記的規(guī)則。所述規(guī)則包括從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)；以及確定單個圖層與HTML標(biāo)記之間的映射關(guān)系以及圖層組與HTML標(biāo)記之間的映射關(guān)系。對于確定單個圖層與HTML標(biāo)記之間的映射關(guān)系以及圖層組與HTML標(biāo)記之間的映射關(guān)系，優(yōu)選通過使用約定名稱對有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。上述的頁面模板可以包括布局方式、圖像展示方式、文本排版方式等。
[0059]生成模塊506可以被配置成根據(jù)所述規(guī)則將所述有效圖層生成HTML標(biāo)記。
[0060]處理模塊507可以被配置成將所生成的HTML標(biāo)記存儲為文本文件或者將所生成的HTML標(biāo)記發(fā)送到客戶端。該處理模塊507可以根據(jù)客戶端的需要而設(shè)置。
[0061]本申請的系統(tǒng)500所包括的各個模塊的具體實施與本申請的方法中的步驟的具體實施是相對應(yīng)的，為了不模糊本申請，在此省略對各個模塊的具體細(xì)節(jié)進(jìn)行描述。
[0062]本申請的方法和系統(tǒng)使用靈活的javascript代碼來實現(xiàn)，因此只要能夠運(yùn)行javascript語言的平臺都能夠進(jìn)行應(yīng)用。由于Node, js是基于Google_V8引擎高效執(zhí)行javascript代碼的服務(wù)端語言平臺，PSD.js在Google_V8引擎下的執(zhí)行效果最佳，因此本申請在node, js平臺下運(yùn)行效果最佳,客戶端的實現(xiàn)可以在最新版的Chrome瀏覽器中得到最好的體驗。當(dāng)然，本申請的方法和系統(tǒng)也可以在其他瀏覽器中得到良好的體驗。另外，本申請使用完全javascript語言完成，可以在客戶端完成大部分轉(zhuǎn)化操作，從而減少服務(wù)器壓力并提高轉(zhuǎn)化效率。另外，本申請在生成HTML標(biāo)記的過程中采用可配置模板方案，就可以根據(jù)不同的HTML需求來完成生成標(biāo)記的過程。
[0063]本申請還可以通過軟件來實現(xiàn)，所述軟件能夠在其中執(zhí)行的計算機(jī)系統(tǒng)如圖6所
/Jn ο
[0064]圖6示出了適于用來實現(xiàn)本申請實施方式的計算機(jī)系統(tǒng)的框圖。如圖7所示，計算機(jī)系統(tǒng)可以包括:CPU (中央處理單元)601、RAM (隨機(jī)存取存儲器)602、ROM (只讀存儲器)603、系統(tǒng)總線604、硬盤控制器605、鍵盤控制器606、串行接口控制器607、并行接口控制器608、顯示控制器609、硬盤610、鍵盤611、串行外部設(shè)備612、并行外部設(shè)備613和顯示器614。在這些部件中，與系統(tǒng)總線604相連的有CPU 601、RAM 602、ROM 603、硬盤控制器605、鍵盤控制器606、串行控制器607、并行控制器608和顯示控制器609。硬盤610與硬盤控制器605相連，鍵盤611與鍵盤控制器606相連，串行外部設(shè)備612與串行接口控制器607相連，并行外部設(shè)備613與并行接口控制器608相連，以及顯示器613與顯示控制器609相連。
[0065]應(yīng)當(dāng)理解，圖6所述的結(jié)構(gòu)框圖僅僅為了示例的目的而示出的，而不是對本申請范圍的限制。在某些情況下，可以根據(jù)具體情況而增加或者減少某些設(shè)備。
[0066]特別地，除硬件實施方式之外，本申請的實施方式可以通過計算機(jī)程序產(chǎn)品的形式實現(xiàn)。例如，參考圖疒圖5描述的方法可以通過計算機(jī)程序產(chǎn)品來實現(xiàn)。該計算機(jī)程序產(chǎn)品可以存儲在例如圖6所示的RAM 604、ROM 604、硬盤610和/或任何適當(dāng)?shù)拇鎯橘|(zhì)中，或者通過網(wǎng)絡(luò)從適當(dāng)?shù)奈恢孟螺d到計算機(jī)系統(tǒng)上。計算機(jī)程序產(chǎn)品可以包括計算機(jī)代碼部分，其包括可由適當(dāng)?shù)奶幚碓O(shè)備(例如，圖6中示出的CPU 601)執(zhí)行的程序指令。所述程序指令至少可以包括用于實現(xiàn)上文描述的方法的指令。
[0067]應(yīng)當(dāng)注意，本申請的實施方式可以通過硬件、軟件或者軟件和硬件的結(jié)合來實現(xiàn)。硬件部分可以利用專用邏輯來實現(xiàn)；軟件部分可以存儲在存儲器中，由適當(dāng)?shù)闹噶顖?zhí)行系統(tǒng)，例如微處理器或者專用設(shè)計硬件來執(zhí)行。本領(lǐng)域的普通技術(shù)人員可以理解上述的設(shè)備和方法可以使用計算機(jī)可執(zhí)行指令和/或包含在處理器控制代碼中來實現(xiàn)，例如在諸如磁盤、CD或DVD-ROM的載體介質(zhì)、諸如只讀存儲器(固件)的可編程的存儲器或者諸如光學(xué)或電子信號載體的數(shù)據(jù)載體上提供了這樣的代碼。本申請的設(shè)備及其模塊可以由諸如超大規(guī)模集成電路或門陣列、諸如邏輯芯片、晶體管等的半導(dǎo)體、或者諸如現(xiàn)場可編程門陣列、可編程邏輯設(shè)備等的可編程硬件設(shè)備的硬件電路實現(xiàn)，也可以用由各種類型的處理器執(zhí)行的軟件實現(xiàn)，也可以由上述硬件電路和軟件的結(jié)合例如固件來實現(xiàn)。
[0068]應(yīng)當(dāng)注意，盡管在上文詳細(xì)描述中提及了設(shè)備的若干模塊或子模塊，但是這種劃分僅僅并非強(qiáng)制性的。實際上，根據(jù)本申請的實施方式，上文描述的兩個或更多模塊的特征和功能可以在一個模塊中具體化。反之，上文描述的一個模塊的特征和功能可以進(jìn)一步劃分為由多個模塊來具體化。
[0069]此外，盡管在附圖中以特定順序描述了本申請方法的操作，但是，這并非要求或者暗示必須按照該特定順序來執(zhí)行這些操作，或是必須執(zhí)行全部所示的操作才能實現(xiàn)期望的結(jié)果。相反，流程圖中描繪的步驟可以改變執(zhí)行順序。附加地或備選地，可以省略某些步驟，將多個步驟合并為一個步驟執(zhí)行，和/或?qū)⒁粋€步驟分解為多個步驟執(zhí)行。
[0070]本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本申請的實施例可提供為方法、系統(tǒng)、或計算機(jī)程序產(chǎn)品。因此，本申請可采用完全硬件實施例、完全軟件實施例、或結(jié)合軟件和硬件方面的實施例的形式。而且，本申請可采用在一個或多個其中包含有計算機(jī)可用程序代碼的計算機(jī)可用存儲介質(zhì)(包括但不限于磁盤存儲器、CD-ROM、光學(xué)存儲器等)上實施的計算機(jī)程序產(chǎn)品的形式。
[0071]以上所述僅為本申請的實施例而已，并不用于限制本申請，對于本領(lǐng)域的技術(shù)人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本申請的權(quán)利要求范圍之內(nèi)。
【權(quán)利要求】
1.一種用于將視覺稿源文件生成HTML標(biāo)記的方法，包括: 使用解析器解析視覺稿源文件的圖層； 基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層； 選擇用于生成HTML標(biāo)記的規(guī)則；以及 根據(jù)所述規(guī)則，將所述有效圖層生成HTML標(biāo)記。
2.根據(jù)權(quán)利要求1所述的方法，還包括: 基于解析結(jié)果過濾無效圖層。
3.根據(jù)權(quán)利要求2所述的方法，其中，所述基于解析結(jié)果過濾無效圖層的步驟進(jìn)一步包括: 根據(jù)圖層的屬性去除不可見圖層；以及 根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層。
4.根據(jù)權(quán)利要求1所述的方法，其中，所述有效圖層還包括一個或多個圖層組，將每一圖層組作為整體進(jìn)行標(biāo)記，以使視覺稿中的圖層組的結(jié)構(gòu)與HTML標(biāo)記的結(jié)構(gòu)至少部分相匹配。
5.根據(jù)權(quán)利要求4所述的方法，其中，所述規(guī)則還包括:確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系。
6.根據(jù)權(quán)利要求5所述的方法，其中，所述確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系通過使用約定名稱對所述有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。
7.根據(jù)權(quán)利要求1所述的方法，其中，所述規(guī)則包括:從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)。
8.根據(jù)權(quán)利要求7所述的方法，其中，所述頁面模板包括布局方式、圖像展示方式、文本排版方式。
9.根據(jù)權(quán)利要求廣7中任意一項所述的方法，還包括: 將所生成的HTML標(biāo)記存儲為文本文件或者將所生成的HTML標(biāo)記發(fā)送到客戶端。
10.一種用于將視覺稿源文件生成HTML標(biāo)記的系統(tǒng)，包括: 解析模塊，其用于使用解析器解析視覺稿源文件的圖層； 獲取模塊，其用于基于解析結(jié)果獲取包含一個或多個單個圖層的有效圖層； 選擇模塊，其用于選擇用于生成HTML標(biāo)記的規(guī)則；以及 生成模塊，其用于根據(jù)所述規(guī)則將所述有效圖層生成HTML標(biāo)記。
11.根據(jù)權(quán)利要求10所述的系統(tǒng)，還包括: 過濾模塊，其用于基于解析結(jié)果過濾無效圖層。
12.根據(jù)權(quán)利要求11所述的系統(tǒng)，其中，所述過濾模塊進(jìn)一步包括: 第一去除模塊，其用于根據(jù)圖層的屬性去除不可見圖層；以及 第二去除模塊，其用于根據(jù)圖層的層級關(guān)系和透明程度去除被覆蓋的圖層。
13.根據(jù)權(quán)利要求10所述的系統(tǒng)，其中，所述有效圖層還包括一個或多個圖層組， 所述系統(tǒng)還包括標(biāo)記模塊，其用于將每一圖層組作為整體進(jìn)行標(biāo)記，以使視覺稿中的圖層組的結(jié)構(gòu)與HTML標(biāo)記的結(jié)構(gòu)至少部分相匹配。
14.根據(jù)權(quán)利要求13所述的系統(tǒng)，其中，所述規(guī)則還包括:確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系。
15.根據(jù)權(quán)利要求14所述的系統(tǒng)，其中，所述確定所述單個圖層與所述HTML標(biāo)記之間的映射關(guān)系以及所述圖層組與所述HTML標(biāo)記之間的映射關(guān)系通過使用約定名稱對所述有效圖層進(jìn)行標(biāo)記以提供公用的javascript交互方案。
16.根據(jù)權(quán)利要求10所述的系統(tǒng)，其中，所述規(guī)則包括從多種頁面模板中選擇一種頁面模板以確定要生成的HTML標(biāo)記的結(jié)構(gòu)，所述頁面模板包括布局方式、圖像展示方式、文本排版方式。`
【文檔編號】G06F9/45GK103777989SQ201210414858
【公開日】2014年5月7日 申請日期:2012年10月25日 優(yōu)先權(quán)日:2012年10月25日
【發(fā)明者】時揚(yáng)揚(yáng) 申請人:阿里巴巴集團(tuán)控股有限公司