圖片自適應(yīng)處理的方法和系統(tǒng)與流程

本公開實(shí)施例涉及圖片處理技術(shù)領(lǐng)域，尤其涉及一種圖片自適應(yīng)的方法和系統(tǒng)。

背景技術(shù)：

隨著移動(dòng)Web應(yīng)用的發(fā)展，瀏覽器已經(jīng)逐漸從傳統(tǒng)桌面轉(zhuǎn)向移動(dòng)端，目前國內(nèi)市場主流的手機(jī)瀏覽器有：UC、百度、歐朋、QQ、Safari、Chrome等。手機(jī)是移動(dòng)互聯(lián)網(wǎng)時(shí)代的主要終端載體，終端的多樣化，眾多的手機(jī)操作系統(tǒng)、分辨率、瀏覽器，造就了形形色色的終端，一個(gè)優(yōu)秀的產(chǎn)品要想覆蓋更多的用戶群體，就需要更多地考慮多終端兼容問題。

無論是PC端還是移動(dòng)端，web開發(fā)人員通常需要用背景圖片去實(shí)現(xiàn)設(shè)計(jì)師給出的一些絢麗的視覺效果，對(duì)于規(guī)則的網(wǎng)頁設(shè)計(jì)，可以采用響應(yīng)式布局實(shí)現(xiàn)，但是針對(duì)不規(guī)則的網(wǎng)頁設(shè)計(jì)，目前還沒有一套成熟的多終端適配的解決方案。

針對(duì)不規(guī)則的網(wǎng)頁設(shè)計(jì)，目前常見的解決方案是九宮格布局：九宮格布局就像是一個(gè)三行三列的表格，窗體可以在八個(gè)方向拉伸，這種布局逐漸被設(shè)計(jì)師運(yùn)用到網(wǎng)頁設(shè)計(jì)中。其中每一行包括三列，四個(gè)頂角是寬高固定的區(qū)域，四條邊是要水平或垂直平鋪的，中間的區(qū)域就是承載內(nèi)容的主要區(qū)域。結(jié)構(gòu)層：因?yàn)橐m應(yīng)八個(gè)方向的伸縮，所以每個(gè)方向都要用一個(gè)div來實(shí)現(xiàn)，少一個(gè)則靈活性就不足。表現(xiàn)層：基本實(shí)現(xiàn)原理是將最外層的容器設(shè)置為相對(duì)定位并且超出的部分全部隱藏，將里面的八個(gè)方向的div設(shè)置為絕對(duì)定位。

在實(shí)現(xiàn)本發(fā)明的過程中，發(fā)明人發(fā)現(xiàn)針對(duì)不規(guī)則的網(wǎng)頁設(shè)計(jì)，傳統(tǒng)的九宮格布局至少存在如下問題：

1、從結(jié)構(gòu)層上看，九宮格布局結(jié)構(gòu)比較臃腫；

2、每個(gè)節(jié)點(diǎn)是必不可少的，無法精簡，否則會(huì)導(dǎo)致其靈活性不夠；

3、八個(gè)方向需要提供不同的圖片，圖片數(shù)量太多，增加請(qǐng)求數(shù)量；

4、九宮格四條邊上的圖片只能是規(guī)則性的，靈活性較差；

5、設(shè)計(jì)師提供更加豐富的皮膚方案，開發(fā)人員無法靈活運(yùn)用，無法實(shí)現(xiàn)更多視覺效果。

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

本公開實(shí)施例提供一種圖片自適應(yīng)處理的方法和系統(tǒng)，用以解決現(xiàn)有技術(shù)中存在的一個(gè)或多個(gè)問題。

本公開實(shí)施例提供一種圖片自適應(yīng)處理的方法，包括：對(duì)圖片進(jìn)行切分以形成主體內(nèi)容層和至少一個(gè)圖案層；至少基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放。

本公開實(shí)施例提供一種圖片自適應(yīng)處理的系統(tǒng)，包括：切分模塊，配置用于對(duì)圖片進(jìn)行切分以形成主體內(nèi)容層和至少一個(gè)圖案層；縮放模塊，配置用于至少基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放。

本公開實(shí)施例提供的圖片自適應(yīng)處理的方法及系統(tǒng)，通過對(duì)圖片進(jìn)行切分并至少基于屏幕顯示寬度對(duì)切分后的圖片進(jìn)行縮放，改變了現(xiàn)有技術(shù)中九宮格結(jié)構(gòu)復(fù)雜，需要的圖片較多，很多情況下對(duì)不規(guī)則的圖片處理不好的問題，實(shí)現(xiàn)了簡化代碼，提高處理效率，可以很好地處理不規(guī)則圖片。

附圖說明

為了更清楚地說明本公開實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作一簡單地介紹，顯而易見地，下面描述中的附圖是本公開的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為現(xiàn)有技術(shù)中圖片自適應(yīng)處理方法的切分圖；

圖2為本公開圖片自適應(yīng)處理方法實(shí)施例流程圖；

圖3a為本公開圖片自適應(yīng)處理方法的一個(gè)實(shí)施例切分圖；

圖3b為本公開圖片自適應(yīng)處理方法的另一個(gè)實(shí)施例切分圖；

圖4為本公開圖片自適應(yīng)處理方法的實(shí)施例效果圖；

圖5a為本公開圖片自適應(yīng)處理方法實(shí)施例的切分效果圖；

圖5b為現(xiàn)有技術(shù)中圖片自適應(yīng)處理方法的切分效果圖；

圖6為本公開圖片自適應(yīng)處理的系統(tǒng)實(shí)施例結(jié)構(gòu)示意圖；

圖7為可以應(yīng)用于實(shí)現(xiàn)本公開實(shí)施例的終端設(shè)備或服務(wù)器的計(jì)算機(jī)系統(tǒng)的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為使本公開實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本公開實(shí)施例中的附圖，對(duì)本公開實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本公開一部分實(shí)施例，而不是全部的實(shí)施例?；诒竟_中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本公開保護(hù)的范圍。

需要說明的是，在不沖突的情況下，本公開中的實(shí)施例及實(shí)施例中的特征可以相互組合。下面將參考附圖并結(jié)合實(shí)施例來詳細(xì)說明本公開。

圖1示出了現(xiàn)有技術(shù)中圖片自適應(yīng)處理方法的切分圖100。

如圖1所示，現(xiàn)有技術(shù)圖片自適應(yīng)處理方法用的是九宮格布局，切分圖100包括四個(gè)頂角101，102，103和104；四條邊105，106，107和108；以及內(nèi)容區(qū)109。在九宮格布局中，四個(gè)角都是寬高固定的，所以九宮格布局在應(yīng)用于頁面時(shí)，一般都是先根據(jù)屏幕顯示寬度水平方向拉伸，再根據(jù)屏幕顯示高度在高度方向拉伸，因此，如果圖片的寬高比與屏幕的寬高比不一致，而四條邊上的圖片為不規(guī)則時(shí)，很容易造成四條邊上的圖片被拉變形，用戶體驗(yàn)極不好。有些為了不讓圖片變形，可能會(huì)按照?qǐng)D片寬高比進(jìn)行縮放，但是無法適用于更多的屏幕尺寸，不能兼容多種終端，用戶體驗(yàn)不好。

下面給出本公開實(shí)施例的圖片自適應(yīng)的處理方法，本公開的方案可以解決現(xiàn)有技術(shù)中存在的一個(gè)或多個(gè)問題。

請(qǐng)參考圖2，其示出了本公開圖片自適應(yīng)處理方法實(shí)施例流程圖200。

如圖2所示，在步驟201中，對(duì)圖片進(jìn)行切分以形成主體內(nèi)容層和至少一個(gè)圖案層。

在本實(shí)施例中，先對(duì)網(wǎng)頁設(shè)計(jì)師給出的圖片進(jìn)行切分，形成圖案層加主體內(nèi)容層的布局。其中，圖案層可以有一個(gè)或多個(gè)，本公開在此方面沒有限制。圖案層與主體內(nèi)容層的布局可以是圖案層-主體內(nèi)容層或主體內(nèi)容層-圖案層，也可以是圖案層-主體內(nèi)容層-圖案層?？梢赃M(jìn)一步參考圖3a和圖3b，圖3a示出了本公開圖片自適應(yīng)處理方法的一個(gè)實(shí)施例切分圖，圖3b示出了本公開圖片自適應(yīng)處理方法的另一個(gè)實(shí)施例切分圖。如圖3a所示，切分后的圖片包括一個(gè)圖案層311和一個(gè)主體內(nèi)容層312，其中，圖案層311可以在主體內(nèi)容層312的任意一個(gè)方位，例如圖中所示的上面，也可以在主體內(nèi)容層312的下面，左邊或右邊，本公開在此方面沒有限制。

本實(shí)施例的方案可以實(shí)現(xiàn)更簡單的布局，由于布局相比九宮格布局更簡單，因此，設(shè)計(jì)的代碼量大大減少，需要的切分的圖片數(shù)量也大大減少。

在步驟202中，至少基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放。

在本實(shí)施例中，可以至少基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放。也可以基于屏幕顯示寬高比或者屏幕顯示高度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放，本公開在此方面沒有限制。

本實(shí)施例的方案可以在現(xiàn)有技術(shù)的基礎(chǔ)上實(shí)現(xiàn)更加簡化的布局，由于布局簡單，使用不規(guī)則的圖片時(shí)，按照本方案進(jìn)行縮放也不會(huì)出現(xiàn)圖片變形的現(xiàn)象，并且可以兼容多種屏幕。

在一些可選的實(shí)施例中，可以先基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行等比縮放，即可以將圖案層和主體內(nèi)容層先按照原始圖片的寬高比等比縮放至寬度與屏幕顯示寬度一致；然后，可以基于屏幕顯示高度對(duì)主體內(nèi)容層的高度進(jìn)行縮放，即當(dāng)寬度與屏幕顯示寬度一致后，如果高度與屏幕顯示高度不一致時(shí)，還可以根據(jù)屏幕顯示高度將主體內(nèi)容層在高度方向拉伸或縮短至主體內(nèi)容層的高度與圖案層的高度相加為當(dāng)前的屏幕顯示高度；最后，將縮放后的圖案層和主體內(nèi)容層布置在屏幕上，即可以將縮放好的圖案層和主體內(nèi)容層布置在屏幕上。上述方案可以實(shí)現(xiàn)更精確的布局，并且，由于使用等比縮放的技術(shù)，可以更好地將設(shè)計(jì)師的方案呈現(xiàn)在屏幕上，而不會(huì)出現(xiàn)由于縮放比例不一致，而是設(shè)計(jì)師給的圖片變形，影響呈現(xiàn)效果。

在另一些可選的實(shí)施例中，本公開的圖片自適應(yīng)處理方法可以基于HTML和CSS實(shí)現(xiàn)。

有上述代碼可以看出，本公開的圖片自適應(yīng)處理方案由于切分地更簡潔，代碼結(jié)構(gòu)更簡單，對(duì)切分后的各個(gè)部分的處理也更加簡潔，由于使用HTML編寫結(jié)構(gòu)，采用CSS編寫樣式，可以兼容多種瀏覽器，兼容性更好。需要注意的是，本申請(qǐng)的方案并不限于基于HTML和CSS編寫，本領(lǐng)域的技術(shù)人員還可以使用目前已知的或未來開發(fā)的其他的語言或架構(gòu)編寫，在此不再贅述。

進(jìn)一步參考圖4，其示出了本公開圖片自適應(yīng)處理方法的實(shí)施例效果圖。

如圖4所示，經(jīng)過本公開的方案處理過的圖片可以更好地呈現(xiàn)設(shè)計(jì)師給出的絢麗的效果。其中，401和403均為圖案層，402為填充了內(nèi)容的主體內(nèi)容層。經(jīng)過本公開的方案中的相關(guān)處理，該圖片可以適用于多種不同寬高比的屏幕，并且處理后的圖片不會(huì)變形，可以實(shí)現(xiàn)很多現(xiàn)有技術(shù)中無法實(shí)現(xiàn)的效果，能很好地表達(dá)設(shè)計(jì)師想要的效果，用戶體驗(yàn)更好。

進(jìn)一步參考圖5a和圖5b，圖5a示出了本公開圖片自適應(yīng)處理方法實(shí)施例的切分效果圖，圖5b示出了現(xiàn)有技術(shù)中圖片自適應(yīng)處理方法的切分效果圖。其中圖5a中，應(yīng)用本公開的圖片自適應(yīng)處理方法，只需將設(shè)計(jì)師給出的切分成圖中的圖案層511和513以及主體內(nèi)容層512，再在主體內(nèi)容層512中填充內(nèi)容，即可很好地實(shí)現(xiàn)設(shè)計(jì)師給出的方案和效果。進(jìn)一步參考圖5b，雖然也能實(shí)現(xiàn)設(shè)計(jì)師給出的方案和效果，但是需要將圖片切分成圖中的九個(gè)部分：四個(gè)頂角521，523，527和529，四條邊522，524，526和528，以及內(nèi)容部分525，因?yàn)榍蟹值膱D片更多，結(jié)構(gòu)更加復(fù)雜，處理起來也需要更多步驟。相比之下，采用本公開的方案，切分的圖片更少，結(jié)構(gòu)更加精簡，由于處理時(shí)需要加載的圖片更少，也能處理得更快。

由圖5a和圖5b的對(duì)比可以看出，本公開的方案也能用于處理之前用九宮格布局處理的圖片，并且很多(例如圖4)本公開的方案可以很好地處理，而用九宮格處理不僅繁瑣，也可能無法實(shí)現(xiàn)設(shè)計(jì)師想要的效果，并且不能很好地兼容多種屏幕。

雖然本公開的示例性實(shí)施例只示出了以上示例性效果圖，但是本公開的圖片自適應(yīng)處理方案還可以有實(shí)現(xiàn)其他效果的圖片，本領(lǐng)域的技術(shù)人員很容易根據(jù)以上描述給出更多的方案和效果，在此不再贅述。

請(qǐng)參考圖6，其示出了本公開圖片自適應(yīng)處理的系統(tǒng)實(shí)施例結(jié)構(gòu)示意圖。

如圖6所示，圖片自適應(yīng)處理的系統(tǒng)600包括切分模塊601和縮放模塊602。其中，切分模塊601，配置用于對(duì)圖片進(jìn)行切分以形成主體內(nèi)容層和至少一個(gè)圖案層；縮放模塊602，配置用于至少基于屏幕顯示寬度對(duì)圖案層和主體內(nèi)容層進(jìn)行縮放。本公開的實(shí)施例可以實(shí)現(xiàn)更加簡潔的布局和更好地處理不規(guī)則的圖片。

在一些可選的實(shí)施例中，圖片自適應(yīng)處理的系統(tǒng)600中的切分模塊601還可以進(jìn)一步包括第一切分模塊(圖中未示出)或者第二切分模塊(圖中未示出)其中，第一切分模塊，配置用于對(duì)圖片進(jìn)行切分以形成圖案層-主體內(nèi)容層或主體內(nèi)容層-圖案層的布局。而第二切分模塊，配置用于對(duì)圖片進(jìn)行切分以形成圖案層-主體內(nèi)容層-圖案層的布局。

在另一些可選的實(shí)施例中，圖片自適應(yīng)處理的系統(tǒng)600中的縮放模塊602還可以進(jìn)一步包括等比縮放模塊、高度縮放模塊和布置模塊(圖中未示出)。其中，等比縮放模塊，配置用于基于屏幕顯示寬度對(duì)所述圖案層和所述主體內(nèi)容層進(jìn)行等比縮放；高度縮放模塊，配置用于基于屏幕顯示高度對(duì)主體內(nèi)容層的高度進(jìn)行縮放；以及布置模塊，配置用于將縮放后的圖案層和主體內(nèi)容層布置在所述屏幕上。

在另一些可選的實(shí)施例中，圖片自適應(yīng)處理的系統(tǒng)600還可以基于HTML和CSS實(shí)現(xiàn)。由于使用HTML和CSS實(shí)現(xiàn)，可以具有對(duì)多種瀏覽器的兼容。

應(yīng)當(dāng)理解，圖6中記載的諸模塊與參考圖2中描述的方法中的各個(gè)步驟相對(duì)應(yīng)。由此，上文針對(duì)方法描述的操作和特征以及相應(yīng)的技術(shù)效果同樣適用于圖6中的諸模塊，在此不再贅述。

值得注意的是，本公開的實(shí)施例中的模塊并不用于限制本公開的方案，例如切分模塊可以描述為用于對(duì)圖片進(jìn)行切分以形成主體內(nèi)容層和至少一個(gè)圖案層的模塊。另外，還可以通過硬件處理器來實(shí)現(xiàn)相關(guān)功能模塊，例如切分模塊也可以用處理器實(shí)現(xiàn)，在此不再贅述。

下面參考圖7，其示出了適于用來實(shí)現(xiàn)本公開實(shí)施例的終端設(shè)備或服務(wù)器的計(jì)算機(jī)系統(tǒng)700的結(jié)構(gòu)示意圖。

如圖7所示，計(jì)算機(jī)系統(tǒng)700包括中央處理單元(CPU)701，其可以根據(jù)存儲(chǔ)在只讀存儲(chǔ)器(ROM)702中的程序或者從存儲(chǔ)部分708加載到隨機(jī)訪問存儲(chǔ)器(RAM)703中的程序而執(zhí)行各種適當(dāng)?shù)膭?dòng)作和處理。在RAM 703中，還存儲(chǔ)有系統(tǒng)700操作所需的各種程序和數(shù)據(jù)。CPU 701、ROM 702以及RAM 703通過總線704彼此相連。輸入/輸出(I/O)接口705也連接至總線704。

以下部件連接至I/O接口705：包括鍵盤、鼠標(biāo)等的輸入部分706；包括諸如陰極射線管(CRT)、液晶顯示器(LCD)等以及揚(yáng)聲器等的輸出部分707；包括硬盤等的存儲(chǔ)部分708；以及包括諸如LAN卡、調(diào)制解調(diào)器等的網(wǎng)絡(luò)接口卡的通信部分709。通信部分709經(jīng)由諸如因特網(wǎng)的網(wǎng)絡(luò)執(zhí)行通信處理。驅(qū)動(dòng)器710也根據(jù)需要連接至I/O接口705。可拆卸介質(zhì)711，諸如磁盤、光盤、磁光盤、半導(dǎo)體存儲(chǔ)器等等，根據(jù)需要安裝在驅(qū)動(dòng)器710上，以便于從其上讀出的計(jì)算機(jī)程序根據(jù)需要被安裝入存儲(chǔ)部分708。

特別地，根據(jù)本公開的實(shí)施例，上文參考流程圖描述的過程可以被實(shí)現(xiàn)為計(jì)算機(jī)軟件程序。例如，本公開的實(shí)施例包括一種計(jì)算機(jī)程序產(chǎn)品，其包括有形地包含在機(jī)器可讀介質(zhì)上的計(jì)算機(jī)程序，所述計(jì)算機(jī)程序包含用于執(zhí)行流程圖所示的方法的程序代碼。在這樣的實(shí)施例中，該計(jì)算機(jī)程序可以通過通信部分709從網(wǎng)絡(luò)上被下載和安裝，和/或從可拆卸介質(zhì)711被安裝。

以上所描述的裝置實(shí)施例僅僅是示意性的，其中所述作為分離部件說明的模塊可以是或者也可以不是物理上分開的，作為模塊顯示的部件可以是或者也可以不是物理模塊，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)模塊上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部模塊來實(shí)現(xiàn)本實(shí)施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性的勞動(dòng)的情況下，即可以理解并實(shí)施。

通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到各實(shí)施方式可借助軟件加必需的通用硬件平臺(tái)的方式來實(shí)現(xiàn)，當(dāng)然也可以通過硬件?；谶@樣的理解，上述技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中，如ROM/RAM、磁碟、光盤等，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行各個(gè)實(shí)施例或者實(shí)施例的某些部分所述的方法。

最后應(yīng)說明的是：以上實(shí)施例僅用以說明本公開的技術(shù)方案，而非對(duì)其限制；盡管參照前述實(shí)施例對(duì)本公開進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：其依然可以對(duì)前述各實(shí)施例所記載的技術(shù)方案進(jìn)行修改，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本公開各實(shí)施例技術(shù)方案的精神和范圍。