本發(fā)明涉及圖像處理技術領域，尤其涉及一種界面圖片的占位圖的處理方法。

背景技術：

智能電視是基于互聯(lián)網(wǎng)應用技術的電視產(chǎn)品，具備開放式操作系統(tǒng)與芯片，擁有開放式應用平臺，可實現(xiàn)雙向人機交互功能，集影音、娛樂、數(shù)據(jù)等多種功能于一體，以滿足用戶多樣化和個性化需求。

目前,市面上的智能電視機已經(jīng)全部提供接入網(wǎng)絡的能力，用戶在進行網(wǎng)絡瀏覽的時候常常需要加載大量的圖片，但是由于部分用戶的網(wǎng)絡帶寬不足或者圖片較大、較多，導致頁面在加載圖片的時候會有幾秒的等待時間。

現(xiàn)有技術中一般采用設置占位圖的方式,將所有圖片位置放置統(tǒng)一的占位圖。然而,相同顏色的圖案多次重復出現(xiàn),界面顯示單調(diào),用戶體驗不好。

技術實現(xiàn)要素：

本發(fā)明提供了一種界面圖片的占位圖的處理方法，以解決現(xiàn)有技術中智能電視上網(wǎng)的時候，由于網(wǎng)速慢或者圖片較多導致在頁面加載過程中相同的占位圖重復出現(xiàn)，導致界面顯示單調(diào)的問題。

本發(fā)明實施例提供了一種界面圖片的占位圖的處理方法，包括：

獲取頁面加載圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)；

根據(jù)所述尺寸數(shù)據(jù)和位置數(shù)據(jù)生成所述頁面加載圖片的第一占位圖；

獲取背景顏色參數(shù)值，所述背景顏色參數(shù)包含色相、飽和度和亮度；

根據(jù)所述背景顏色參數(shù)值生成所述第一占位圖的背景顏色；

將所述第一占位圖疊加在所述背景顏色上，生成第二占位圖；

將所述第二占位圖在所述頁面上加載圖片的位置進行顯示。

進一步的，所述獲取頁面加載圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)具體包括：

檢測頁面加載圖片，提取所述尺寸數(shù)據(jù)和位置數(shù)據(jù)。

進一步的，所述根據(jù)所述尺寸數(shù)據(jù)和位置數(shù)據(jù)生成所述頁面加載圖片的第一占位圖具體包括：

生成與所述頁面加載圖片尺寸、位置相同的第一占位圖。

進一步的，所述方法還包括：

將所述第一占位圖的顏色設置為純白色，透明度設置為10％。

進一步的，所述獲取背景顏色參數(shù)值，所述背景顏色參數(shù)包含色相、飽和度和亮度具體包括：

利用隨機函數(shù)在0-360之間選取色相值；

利用隨機函數(shù)在15-30之間選取飽和度值；

利用隨機函數(shù)在50-70之間選取亮度值。

進一步的，所述根據(jù)所述背景顏色參數(shù)值生成所述第一占位圖的背景顏色具體包括：

根據(jù)所述色相值、飽和度值和亮度值生成所述第一占位圖的背景顏色，并對所述背景顏色進行去重處理。

進一步的，在將所述第二占位圖在所述頁面上加載圖片的位置進行顯示之后，所述方法還包括：

將所述頁面加載圖片覆蓋在所述第二占位圖上，從而實現(xiàn)圖片加載。

本發(fā)明實施例提供的界面圖片的占位圖的處理方法，獲取頁面加載圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)；根據(jù)尺寸數(shù)據(jù)和位置數(shù)據(jù)生成頁面加載圖片的第一占位圖；獲取背景顏色參數(shù)值，背景顏色參數(shù)包含色相、飽和度和亮度；根據(jù)背景顏色參數(shù)值生成第一占位圖的背景顏色；將第一占位圖疊加在背景顏色上，生成第二占位圖；將第二占位圖在頁面上加載圖片的位置進行顯示。本發(fā)明實施例提供的方法，根據(jù)頁面加載圖片的尺寸和位置，生成不同背景顏色的占位圖，避免了相同顏色占位圖重復出現(xiàn)的單調(diào)，提升了用戶體驗。

附圖說明

圖1為本發(fā)明實施例提供的界面圖片的占位圖的處理方法的流程圖；

圖2為現(xiàn)有技術中的頁面加載圖片占位圖的示意圖。

具體實施方式

為了使本發(fā)明的目的、技術方案和優(yōu)點更加清楚，下面將結合附圖對本發(fā)明作進一步地詳細描述，顯然，所描述的實施例僅僅是本發(fā)明一部份實施例，而不是全部的實施例。基于本發(fā)明中的實施例，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其它實施例，都屬于本發(fā)明保護的范圍。

現(xiàn)有技術中，用戶在利用智能電視上網(wǎng)時，由于網(wǎng)速慢或者圖片較多，導致在頁面加載過程中出現(xiàn)統(tǒng)一、單調(diào)的占位圖，圖2為現(xiàn)有技術中的頁面加載圖片占位圖的示意圖，如圖2所示，占位圖的圖案相同，顏色相同，從而影響視覺效果，本發(fā)明技術方案針對該問題進行改進。

下面結合圖1所示的界面圖片的占位圖的處理方法流程圖，對本發(fā)明實施例提供的界面圖片的占位圖的處理方法進行詳細說明。

如圖1所示，本發(fā)明提供的界面圖片的占位圖的處理方法主要包括如下步驟：

步驟101，獲取頁面加載圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)。

具體的，檢測當前頁面中需要加載的圖片，提取尺寸數(shù)據(jù)和位置數(shù)據(jù)。其中，尺寸數(shù)據(jù)包括圖片的長度、寬度以及面積數(shù)據(jù)等；位置數(shù)據(jù)包括該圖片在當前頁面中的位置坐標等。

獲取需要加載的圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)的目的是為了確定占位圖的尺寸大小和排列位置，占位圖的尺寸和位置設定與需要加載的圖片的尺寸和位置應該完全相同。

步驟102，根據(jù)尺寸數(shù)據(jù)和位置數(shù)據(jù)生成頁面加載圖片的第一占位圖。

調(diào)用數(shù)據(jù)庫中的占位圖，如果調(diào)用的占位圖的尺寸和頁面加載圖片的尺寸完全相同，則將調(diào)用的占位圖作為第一占位圖，放置在頁面加載圖片的位置；如果調(diào)用的占位圖和頁面加載圖片的尺寸不同，則將調(diào)用的占位圖處理成與頁面加載圖片尺寸相同的第一占位圖，放置在頁面加載圖片的位置，從而實現(xiàn)了占位圖和頁面加載圖片的尺寸、位置完全相同。

步驟103，獲取背景顏色參數(shù)值，背景顏色參數(shù)包含色相、飽和度和亮度。

具體的,利用隨機函數(shù)在0-360之間選取色相值；在15-30之間選取飽和度值；在50-70之間選取亮度值。

在選取隨機函數(shù)時,選用rand()和srand()函數(shù)。

在一個具體的實施例中,這兩個函數(shù)的工作過程如下：

1)給srand()提供一個unsignedint類型的種子值，其取值范圍從0-65535；

如果未設隨機數(shù)種子值，rand()在調(diào)用時會自動設隨機數(shù)種子值為1；

2)調(diào)用rand()，根據(jù)提供給srand()的種子值返回一個隨機數(shù)(在0到32767之間)；

3)根據(jù)需要多次調(diào)用rand()，從而不間斷地得到新的隨機數(shù)；

4)隨時都可以給srand()提供一個新的種子值，從而進一步將rand()的輸出結果“隨機化”。

其中,rand產(chǎn)生的隨機數(shù)的范圍從0到rand_max，對于產(chǎn)生設定范圍的隨機數(shù),例如,產(chǎn)生從a到b范圍的隨機數(shù),因為從a到b共有b-a+1個數(shù),所以要產(chǎn)生從a到b的數(shù),可以寫成k＝rand()％(b-a+1)+a,從而能夠實現(xiàn)產(chǎn)生設定范圍的隨機數(shù)。

在一個具體的實施例中,選用rand()和srand()函數(shù),產(chǎn)生1-100之間的隨機數(shù)的程序代碼如下:

步驟104，根據(jù)背景顏色參數(shù)值生成第一占位圖的背景顏色。

具體的,根據(jù)色相值、飽和度值和亮度值生成第一占位圖的背景顏色，由于利用隨機函數(shù)有可能產(chǎn)生重復取值的色相值、飽和度值和亮度值，因此有可能產(chǎn)生相同的背景顏色，導致達不到在頁面中顯示不同背景顏色占位圖的目的，因此為了避免產(chǎn)生重復的背景顏色，可以在步驟103中的隨機函數(shù)中加入去重處理的語句，具體程序語句如下：

srand((unsigned)time(null))；//初始化隨機數(shù)。

步驟105，將第一占位圖疊加在背景顏色上，生成第二占位圖。

根據(jù)不同的背景顏色參數(shù)值得到不同的背景顏色時，將第一占位圖疊加在不同的背景顏色上，從而得到不同背景顏色的第二占位圖。

在一個優(yōu)選的實施例中，將第一占位圖的顏色設置為純白色，透明度設置為10％。目的是將第一占位圖疊加在不同的背景顏色上時，能夠顯示出不同的背景顏色的占位圖，避免了占位圖疊加之后完全覆蓋背景顏色，導致無法凸顯不同顏色的視覺效果。

步驟106，將第二占位圖在頁面上加載圖片的位置進行顯示。

將具有不同背景顏色的占位圖在加載圖片的位置顯示，避免了相同圖案、相同顏色的占位圖的單調(diào)，從而呈現(xiàn)出色彩豐富的視覺效果。

在將第二占位圖在頁面上加載圖片的位置進行顯示之后，將頁面加載圖片覆蓋在第二占位圖上，從而實現(xiàn)圖片加載。

本發(fā)明實施例提供的界面圖片的占位圖的處理方法，獲取頁面加載圖片的尺寸數(shù)據(jù)和位置數(shù)據(jù)；根據(jù)尺寸數(shù)據(jù)和位置數(shù)據(jù)生成頁面加載圖片的第一占位圖；獲取背景顏色參數(shù)值，背景顏色參數(shù)包含色相、飽和度和亮度；根據(jù)背景顏色參數(shù)值生成第一占位圖的背景顏色；將第一占位圖疊加在背景顏色上，生成第二占位圖；將第二占位圖在頁面上加載圖片的位置進行顯示。本發(fā)明實施例提供的方法，根據(jù)頁面加載圖片的尺寸和位置，生成不同背景顏色的占位圖，避免了相同顏色占位圖重復出現(xiàn)的單調(diào)，提升了用戶體驗。

專業(yè)人員應該還可以進一步意識到，結合本文中所公開的實施例描述的各示例的單元及算法步驟，能夠以電子硬件來實現(xiàn)，在上述說明中已經(jīng)按照功能一般性地描述了各示例的組成及步驟。對每個特定的應用來使用不同方法來實現(xiàn)所描述的功能，但是這種實現(xiàn)不應認為超出本發(fā)明實施例的范圍。具體地，所述運算和控制部分都可以通絡邏輯硬件實現(xiàn)，其可以是使用集成電路工藝制造出來的邏輯集成電路，本實施例對此不作限定。

結合本文中所公開的實施例描述的方法或算法的步驟可以用硬件、處理器執(zhí)行的軟件模塊，或者二者的結合來實施。軟件模塊可以置于隨機存儲器(ram)、內(nèi)存、只讀存儲器(rom)、電可編程rom、電可擦除可編程rom、寄存器、硬盤、可移動磁盤、cd-rom、或技術領域內(nèi)所公知的任意其它形式的存儲介質(zhì)中。

以上所述的具體實施方式，對本發(fā)明實施例的目的、技術方案和有益效果進行了進一步詳細說明，所應理解的是，以上所述僅為本發(fā)明實施例的具體實施方式而已，并不用于限定本發(fā)明實施例的保護范圍，凡在本發(fā)明實施例的精神和原則之內(nèi)，所做的任何修改、等同替換、改進等，均應包含在本發(fā)明實施例的保護范圍之內(nèi)。