頁面樣式自動匹配方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機(jī)應(yīng)用技術(shù)領(lǐng)域，特別涉及一種頁面樣式自動匹配方法及系統(tǒng)。
【背景技術(shù)】
[0002]目前有很多html5生成的某一(如積分、統(tǒng)計、社區(qū)等)功能的頁面集，可直接集成至各類應(yīng)用程序(APP)中，節(jié)省APP的開發(fā)成本。
[0003]但集成的html5頁面與原APP頁面的風(fēng)格往往不盡相同，相關(guān)技術(shù)中，包括兩種解決辦法，一種是在集成中針對不同客戶端風(fēng)格，進(jìn)行額外開發(fā)，增加了工作量，比較麻煩；另一種是事先給出幾套風(fēng)格樣式，供集成方選擇，不能很好的實(shí)現(xiàn)風(fēng)格完全統(tǒng)一，而且需要提供多套，對于提供方來說，成本增加。

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

[0004]本發(fā)明旨在至少解決上述技術(shù)問題之一。
[0005]為此，本發(fā)明的一個目的在于提出一種頁面樣式自動匹配方法。該方法可以將待集成至所述目標(biāo)應(yīng)用中的頁面轉(zhuǎn)換成與目標(biāo)應(yīng)用的頁面圖片具有同一風(fēng)格的樣式，提高了集成效率以及降低開發(fā)成本。
[0006]本發(fā)明的另一個目的在于提出一種頁面樣式自動匹配系統(tǒng)。
[0007]為了實(shí)現(xiàn)上述目的，本發(fā)明的第一方面的實(shí)施例公開了一種頁面樣式自動匹配方法，包括以下步驟:接收目標(biāo)應(yīng)用的頁面圖片；提取所述頁面圖片中多個像素點(diǎn)的顏色值，根據(jù)所述多個像素點(diǎn)的顏色值將所述頁面圖片劃分為多個目標(biāo)區(qū)域；分別根據(jù)所述多個目標(biāo)區(qū)域中對應(yīng)于每個目標(biāo)區(qū)域的多個像素點(diǎn)的顏色值確定每個目標(biāo)區(qū)域的色調(diào)風(fēng)格；根據(jù)所述多個目標(biāo)區(qū)域中每個目標(biāo)區(qū)域的色調(diào)風(fēng)格對待集成至所述目標(biāo)應(yīng)用中的頁面進(jìn)行樣式匹配。
[0008]根據(jù)本發(fā)明實(shí)施例的頁面樣式自動匹配方法可以將待集成至所述目標(biāo)應(yīng)用中的頁面轉(zhuǎn)換成與目標(biāo)應(yīng)用的頁面圖片具有同一風(fēng)格的樣式，提高了集成效率以及降低開發(fā)成本。
[0009]進(jìn)一步地，所述多個目標(biāo)區(qū)域包括導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域，所述提取所述頁面圖片中多個像素點(diǎn)的顏色值，根據(jù)所述多個像素點(diǎn)的顏色值將所述頁面圖片劃分為多個目標(biāo)區(qū)域，包括:當(dāng)所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值發(fā)生突變時，根據(jù)突變位置確定所述導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域。
[0010]進(jìn)一步地，通過如下方式確定所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變，包括:當(dāng)所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值不同時，獲取顏色值不同的像素點(diǎn)的數(shù)量；根據(jù)所述顏色值不同的像素點(diǎn)的數(shù)量確定出所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變。
[0011]進(jìn)一步地，所述分別根據(jù)所述多個目標(biāo)區(qū)域中對應(yīng)于每個目標(biāo)區(qū)域的多個像素點(diǎn)的顏色值確定每個目標(biāo)區(qū)域的色調(diào)風(fēng)格，包括:計算每個目標(biāo)區(qū)域中顏色相同的像素點(diǎn)的數(shù)量；根據(jù)顏色相同的像素點(diǎn)的數(shù)量確定所述目標(biāo)區(qū)域的色調(diào)風(fēng)格。
[0012]進(jìn)一步地，所述頁面圖片為側(cè)滑版頁面圖片，則進(jìn)一步接收目標(biāo)應(yīng)用的導(dǎo)航頁面；計算所述導(dǎo)航頁面的色調(diào)風(fēng)格；根據(jù)所述導(dǎo)航頁面的色調(diào)風(fēng)格對待集成至所述目標(biāo)應(yīng)用中的頁面進(jìn)行進(jìn)一步的樣式匹配。
[0013]本發(fā)明第二方面的實(shí)施例公開了一種頁面樣式自動匹配系統(tǒng)，包括:接收模塊，用于接收目標(biāo)應(yīng)用的頁面圖片；劃分模塊，用于提取所述頁面圖片中多個像素點(diǎn)的顏色值，根據(jù)所述多個像素點(diǎn)的顏色值將所述頁面圖片劃分為多個目標(biāo)區(qū)域；風(fēng)格確定模塊，用于分別根據(jù)所述多個目標(biāo)區(qū)域中對應(yīng)于每個目標(biāo)區(qū)域的多個像素點(diǎn)的顏色值確定每個目標(biāo)區(qū)域的色調(diào)風(fēng)格；匹配模塊，用于根據(jù)所述多個目標(biāo)區(qū)域中每個目標(biāo)區(qū)域的色調(diào)風(fēng)格對待集成至所述目標(biāo)應(yīng)用中的頁面進(jìn)行樣式匹配。
[0014]根據(jù)本發(fā)明實(shí)施例的頁面樣式自動匹配系統(tǒng)可以將待集成至所述目標(biāo)應(yīng)用中的頁面轉(zhuǎn)換成與目標(biāo)應(yīng)用的頁面圖片具有同一風(fēng)格的樣式，提高了集成效率以及降低開發(fā)成本。
[0015]進(jìn)一步地，所述多個目標(biāo)區(qū)域包括導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域，所述劃分模塊用于:當(dāng)所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值發(fā)生突變時，根據(jù)突變位置確定所述導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域。
[0016]進(jìn)一步地，所述劃分模塊通過如下方式確定所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變，包括:當(dāng)所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值不同時，獲取顏色值不同的像素點(diǎn)的數(shù)量；根據(jù)所述顏色值不同的像素點(diǎn)的數(shù)量確定出所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變。
[0017]進(jìn)一步地，所述風(fēng)格確定模塊用于:計算每個目標(biāo)區(qū)域中顏色相同的像素點(diǎn)的數(shù)量；根據(jù)顏色相同的像素點(diǎn)的數(shù)量確定所述目標(biāo)區(qū)域的色調(diào)風(fēng)格。
[0018]進(jìn)一步地，所述頁面圖片為側(cè)滑版頁面圖片，則所述接收模塊進(jìn)一步接收目標(biāo)應(yīng)用的導(dǎo)航頁面；所述風(fēng)格確定模塊還用于計算所述導(dǎo)航頁面的色調(diào)風(fēng)格；所述匹配模塊還用于根據(jù)所述導(dǎo)航頁面的色調(diào)風(fēng)格對待集成至所述目標(biāo)應(yīng)用中的頁面進(jìn)行進(jìn)一步的樣式匹配。
[0019]本發(fā)明的附加方面和優(yōu)點(diǎn)將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過本發(fā)明的實(shí)踐了解到。
【附圖說明】
[0020]本發(fā)明的上述和/或附加的方面和優(yōu)點(diǎn)從結(jié)合下面附圖對實(shí)施例的描述中將變得明顯和容易理解，其中:
[0021]圖1是根據(jù)本發(fā)明一個實(shí)施例的頁面樣式自動匹配方法的流程圖；
[0022]圖2是根據(jù)本發(fā)明另一個實(shí)施例的頁面樣式自動匹配方法中目標(biāo)應(yīng)用的頁面圖片的示意圖；以及
[0023]圖3是根據(jù)本發(fā)明一個實(shí)施例的頁面樣式自動匹配系統(tǒng)的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0024]下面詳細(xì)描述本發(fā)明的實(shí)施例，所述實(shí)施例的示例在附圖中示出，其中自始至終相同或類似的標(biāo)號表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附圖描述的實(shí)施例是示例性的，僅用于解釋本發(fā)明，而不能理解為對本發(fā)明的限制。
[0025]在本發(fā)明的描述中，需要理解的是，術(shù)語“中心”、“縱向”、“橫向”、“上”、“下”、“前”、“后”、“左”、“右”、“豎直”、“水平”、“頂”、“底”、“內(nèi)”、“外”等指示的方位或位置關(guān)系為基于附圖所示的方位或位置關(guān)系，僅是為了便于描述本發(fā)明和簡化描述，而不是指示或暗示所指的裝置或元件必須具有特定的方位、以特定的方位構(gòu)造和操作，因此不能理解為對本發(fā)明的限制。此外，術(shù)語“第一”、“第二”僅用于描述目的，而不能理解為指示或暗示相對重要性。
[0026]在本發(fā)明的描述中，需要說明的是，除非另有明確的規(guī)定和限定，術(shù)語“安裝”、“相連”、“連接”應(yīng)做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機(jī)械連接，也可以是電連接；可以是直接相連，也可以通過中間媒介間接相連，可以是兩個元件內(nèi)部的連通。對于本領(lǐng)域的普通技術(shù)人員而言，可以具體情況理解上述術(shù)語在本發(fā)明中的具體含義。
[0027]以下結(jié)合附圖描述根據(jù)本發(fā)明實(shí)施例的頁面樣式自動匹配方法及系統(tǒng)。
[0028]圖1是根據(jù)本發(fā)明一個實(shí)施例的頁面樣式自動匹配方法的流程圖。如圖1所示，根據(jù)本發(fā)明一個實(shí)施例的頁面樣式自動匹配方法，包括如下步驟:
[0029]S101:接收目標(biāo)應(yīng)用的頁面圖片。例如使用者上傳目標(biāo)應(yīng)用(即:應(yīng)用程序APP)的首頁面的頁面圖片。如圖2左側(cè)部分所示。
[0030]S102:提取頁面圖片中多個像素點(diǎn)的顏色值，根據(jù)多個像素點(diǎn)的顏色值將頁面圖片劃分為多個目標(biāo)區(qū)域。
[0031]其中，多個目標(biāo)區(qū)域包括導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域，提取頁面圖片中多個像素點(diǎn)的顏色值，根據(jù)多個像素點(diǎn)的顏色值將頁面圖片劃分為多個目標(biāo)區(qū)域，包括:當(dāng)頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值發(fā)生突變時，根據(jù)突變位置確定導(dǎo)航區(qū)域、主體區(qū)域和標(biāo)題區(qū)域。
[0032]進(jìn)一步地，通過如下方式確定頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變，包括:當(dāng)頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值不同時，獲取顏色值不同的像素點(diǎn)的數(shù)量；根據(jù)顏色值不同的像素點(diǎn)的數(shù)量確定出所述頁面圖片中相鄰兩行對應(yīng)的多個像素點(diǎn)的顏色值是否發(fā)生突變。
[0033]作為一個具體的示例，劃分頁面圖片的多個目標(biāo)區(qū)域(即:劃分原APP區(qū)域):獲取圖片各像素點(diǎn)的色值，從最上向下一整行色值突變位置，且該位置距離頂部邊距大于10像素處，切分為標(biāo)題區(qū)域；從最下向上一整行夜色突變位置，且該位置距離底部邊距大于10像素，切分為導(dǎo)航區(qū)域；其余中間區(qū)域?yàn)橹黧w區(qū)域。
[0034]整行色值突變確定方式:取頁面橫向像素點(diǎn)數(shù)為N ;本行各個像素點(diǎn)色值為Cn ;下一行各個像素點(diǎn)的色值為Cn+Ι ;下三行為Cn+3?？紤]到過度區(qū)域可能為多行像素的情況，通過比較Cn像素點(diǎn)的色值與Cn+Ι各像素點(diǎn)差值的變化個數(shù)Nx ;同理，比較Cn與Cn+2，Cn+3 ;得出 Nx+l，Nx+2 ;若90% N〈Nx〈 = N 或 90% N〈Nx+l〈 = N 或 90% N〈Nx+2〈 = N，若標(biāo)題區(qū)域，且n>10，則判定此行n為標(biāo)題區(qū)域突變位置行；若底部區(qū)域，且η〈Υ-10，(Υ為縱向像素點(diǎn)數(shù)量)，則判定此行η為底部區(qū)域突變位置行。
[0035]S103:分別根據(jù)多個目標(biāo)區(qū)域中對應(yīng)于每個目標(biāo)區(qū)域的多個像素點(diǎn)的顏色值確定每個目標(biāo)區(qū)域的色調(diào)風(fēng)格。具體包括:計算每個目標(biāo)區(qū)域中顏色相同的像素點(diǎn)的數(shù)量；根據(jù)顏色相同的像素點(diǎn)的數(shù)量確定目標(biāo)區(qū)域的色調(diào)風(fēng)格。
[0036]作為一個具體的示例，如集成html5標(biāo)題區(qū)域色調(diào)風(fēng)格:獲取原APP標(biāo)題區(qū)域所有像素點(diǎn)的色值Cn ;取&1中相同數(shù)量最多的色值Cm為集成html5標(biāo)題區(qū)域的主色調(diào)；取相同數(shù)量第二、第三多的色值分別為Cmt，Cms ;若Cmt與Cms的差值小于50，且Cmt與Cms個數(shù)之和大于85% Cn ;或者Cmt>85% Cn, Cms<95% Cn ;則判定Cmt為標(biāo)題區(qū)域輔色調(diào)。否則，不存在輔色調(diào)；標(biāo)題欄的輔色為自動配置顏色。
[0037]集成html5導(dǎo)航區(qū)域色調(diào)風(fēng)格:獲取原APP導(dǎo)航區(qū)域所有像素點(diǎn)的色值Cn ;取Cn中相同數(shù)量最多的色值Cm為集成html5導(dǎo)航區(qū)域的主色調(diào)；取相同數(shù)量第二、第三多的色值分別為Cmt，Cms ;若Cmt與Cms的差值小于50，且Cmt與Cms個數(shù)之和大于85% Cn ;或者Cmt>85% Cn, Cms<95% Cn ;則判定Cmt為標(biāo)題區(qū)域輔色調(diào)。否則，不存在輔色調(diào)；導(dǎo)航區(qū)域的輔色為自動配置顏色。
[0038]集成html5主體區(qū)域色調(diào)風(fēng)格:獲取原APP主體區(qū)域所有像素點(diǎn)的色值Cn ;取Cn中相同數(shù)量最多