在Web前端進行合圖的方法
【專利摘要】本發明公開一種在Web前端進行合圖的方法，包括如下步驟：獲得在Web頁面中輸入的多張待處理圖片，并通過實時訪問解析每張所述待處理圖片的原始引用位置標識，其中，所述原始引用位置標識與所述待處理圖片一一對應；根據預設合并原則獲得所述多張待處理圖片的新引用位置標識，并利用所述新引用位置標識替換所述原始引用位置標識以將所述待處理圖片設置到對應的位置；根據所述多張待處理圖片及對應的新引用位置標識實時生成合并圖并顯示給用戶。本發明在Web前端進行合圖，從而可以將合圖的中間效果和最終效果實時地呈現給用戶，便于用戶及時調整。
【專利說明】在Web前端進行合圖的方法
【技術領域】
[0001]本發明涉及互聯網【技術領域】，特別涉及一種在Web前端進行合圖的方法。
【背景技術】
[0002]隨著互聯網技術的不斷發展，人們越來越習慣從網頁上的圖片直接獲取信息。因此，圖片質量及布局在Web頁面開發中具有越來越重要的位置。合圖開發作為高性能的Web前端開發中必須的步驟。
[0003]現有的合圖方法是在完成開發后在編譯階段統一根據手動的配置項進行圖片的合并和引用代碼的替換。這樣合圖方法不僅操作復雜維護成本高，而且不能規避上線風險。一旦合圖錯誤，則需重新進行一次冗長的前端編譯流程，從而導致在大型前端項目中開發成本較高。
【發明內容】
[0004]本發明旨在至少在一定程度上解決上述技術問題之一或至少提供一種有用的商業選擇。為此，本發明的目的在于提出一種在Web前端進行合圖的方法，該方法在Web前端進行合圖，從而可以將合圖的中間效果和最終效果實時地呈現給用戶，便于用戶及時調整。
[0005]為實現上述目的，本發明的實施例提供一種在Web前端進行合圖的方法，包括如下步驟:
[0006]獲得在Web頁面中輸入的多張待處理圖片，并通過實時訪問解析每張所述待處理圖片的原始引用位置標識，其中，所述原始引用位置標識與所述待處理圖片一一對應；
[0007]根據預設合并原則獲得所述多張待處理圖片的新引用位置標識，并利用所述新引用位置標識替換所述原始引用位置標識以將所述待處理圖片設置到對應的位置；以及
[0008]根據所述多張待處理圖片及對應的新引用位置標識實時生成合并圖并顯示給用戶。
[0009]根據本發明實施例的在Web前端進行合圖的方法，可以在Web前端進行合圖，即直接在開發調試階段進行圖片合并，解決了引用代碼的自動化實時替換，合圖的圖片實時的生效，徹底規避了線上風險，而且提高了前端合圖的開發效率。
[0010]本發明的附加方面和優點將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過本發明的實踐了解到。
【專利附圖】
【附圖說明】
[0011]本發明的上述和/或附加的方面和優點從結合下面附圖對實施例的描述中將變得明顯和容易理解，其中:
[0012]圖1為根據本發明實施例的在Web前端進行合圖的方法的流程圖；以及
[0013]圖2為根據本發明實施例的合圖的效果圖。【具體實施方式】
[0014]下面詳細描述本發明的實施例，所述實施例的示例在附圖中示出，其中自始至終相同或類似的標號表示相同或類似的元件或具有相同或類似功能的元件。下面通過參考附圖描述的實施例是示例性的，旨在用于解釋本發明，而不能理解為對本發明的限制。
[0015]此外，術語“第一”、“第二”僅用于描述目的，而不能理解為指示或暗示相對重要性或者隱含指明所指示的技術特征的數量。由此，限定有“第一”、“第二”的特征可以明示或者隱含地包括一個或者更多個該特征。在本發明的描述中，“多個”的含義是兩個或兩個以上，除非另有明確具體的限定。
[0016]在本發明中，除非另有明確的規定和限定，術語“安裝”、“相連”、“連接”、“固定”等術語應做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機械連接，也可以是電連接；可以是直接相連，也可以通過中間媒介間接相連，可以是兩個元件內部的連通。對于本領域的普通技術人員而言，可以根據具體情況理解上述術語在本發明中的具體含義。
[0017]下面參考圖1描述本發明實施例的在Web前端進行合圖的方法，包括如下步驟:
[0018]步驟S101，獲得在Web頁面中輸入的多張待處理圖片，并通過實時訪問解析每張待處理圖片設置原始引用位置標識。其中，原始引用位置標識與待處理圖片一一對應。
[0019]具體地，原始引用位置標識包括每張待處理圖片的原始引用坐標和原始引用地址，即該待處理圖片的原始地址。新引用位置標識包括每張待處理圖片對應的新引用坐標和最終生成的合并圖的新引用地址。其中，待處理圖片的新引用坐標可以包括待處理圖片合并到Web頁面的對應區域的橫坐標X和縱坐標I。此外，進一步獲得多張待處理圖片的尺寸信息和內容信息，即獲取待處理圖片的尺寸大小和圖片表述內容。其中，圖片的尺寸大小可以為圖片的存儲容量大小或像素大小。
[0020]步驟S102，根據預設合并原則獲得多張待處理圖片的新引用位置標識，并并利用新引用位置標識替換原始引用位置標識以將待處理圖片設置到對應的坐標的位置。
[0021]具體地，通過實時訪問解析每張待處理圖片在Web頁面中的原始引用坐標，將待處理圖片新坐標信息通過運算生成新引用坐標并取代原始引用坐標。
[0022]然后，將每一張待處理圖片根據對應的唯一的KEY值，匹配獲得合成的合并圖的新引用地址，即合并得到的完整大圖的地址，并通過實時訪問將待處理圖片的原始引用地址替換為新合成的合并圖的新引用地址以將待處理圖片設置到對應的位置。
[0023]在本發明的一個實施例中，進一步包括如下步驟:將實時生成的新坐標和新引用地址反饋顯示給用戶。
[0024]在本發明的一個實施例中，預設合并原則包括以下至少一種:
[0025](I)根據待處理圖片的尺寸信息逐次對多張待處理圖片進行合圖。
[0026]具體地，根據步驟SlOl中獲取的待處理圖片的尺寸信息，將尺寸較大的圖片優先進行合圖處理，尺寸較小的圖片后進行合圖處理。
[0027](2)根據Web頁面中的多個區域的用戶關心程度和待處理圖片的內容信息對多張待處理圖片進行合圖。
[0028]具體地，Web頁面包括多個區域，例如:導航區、標題區、內容區、評論區等。根據用戶對上述多個區域的關心程度的不同，可以對用戶關心的區域優先進行合圖處理。[0029]例如，通過網站點擊率及瀏覽時長的統計，發現用戶對導航區最為關心，則在獲得待處理圖片后，根據圖片的內容選擇符合導航區的圖片優先在該區域對圖片進行合圖處理，從而將用戶最為關心的部分顯示出來。
[0030]采用上述合并原則對多張待處理圖片自動設置多張待處理圖片的坐標，并將步驟SlOl中設置的每張待處理圖片的原始引用位置標識與對應的坐標進行關聯以將待處理圖片設置到對應的坐標的位置。
[0031]步驟S103，根據多張待處理圖片及對應的坐標的位置實時生成合并圖并顯示給用戶。
[0032]用戶在查看到實時生成的合并圖后，如果發現對合并圖并不滿意，可以通過Web頁面手動設置多張待處理圖片的新引用位置標識，從而重新設置圖片在Web頁面的相應區域的位置，由此可以最大程度上的符合用戶的使用習慣。
[0033]需要說明的是，本文上述的用戶是指Web頁面的開發工程師。具體地，本發明實施例的在Web前端進行合圖的方法可以作為一項云服務提供給開發工程師，由開發工程師將實時合并的圖片上線。相應地，可以理解為開發工程師即為本方案對應的用戶。
[0034]根據本發明實施例的在Web前端進行合圖的方法，可以在Web前端進行合圖，即直接在開發調試階段進行圖片合并，解決了引用代碼的自動化實時替換，合圖的圖片實時的生效通過簡單便捷的可視化配置，用戶可以實時查看圖片合并效果，從而可以根據合并效果及時做出調整，徹底規避了線上風險，而且提高了前端合圖的開發效率。
[0035]下面參考圖2對本發明實施例的在Web前端進行合圖的方法進行描述。
[0036]首先，獲取輸入的待處理圖片P1、P2、P3和P4，并對每張待處理圖片設置原始引用位置標識。具體地，待處理圖片Pl可以設為V1、待處理圖片P2可以設為V2、待處理圖片P3可以設為v3、待處理圖片P4可以設為v4。
[0037]預設合并原則采用根據Web頁面中的多個區域的用戶關心程度和待處理圖片的內容信息對多張待處理圖片進行合圖。其中，Web頁面包括四個區域，A為導航區、B為標題區、C為內容區、D為評論區。通過統計發現導航區A為用戶最關心的區域。
[0038]獲取待處理圖片P1、P2、P3和P4的內容信息，發現待處理圖片Pl適合導航區，P2適合標題區，P3適合內容區、P4適合評論區。根據合并原則，優先對導航區進行處理，即自動設置圖片Pl的坐標為(xl，yl)，并將Pl的原始引用位置標識Vl與對應的坐標(xl，yl)進行關聯以將Pl設置到對應的坐標的位置，即導航區A。
[0039]以此類推，自動設置圖片P2的坐標為(x2，y2)，圖片P3的坐標為(x3，y3)，圖片P4的坐標為(x4，y4)，然后將圖片相應的原始引用位置標識與對應的坐標進行關聯以將P2、P3和P4分別設置到標題區B、內容區C和為評論區D。然后，根據四張待處理圖片及對應的坐標的位置實時生成合并圖并顯示給用戶。
[0040]流程圖中或在此以其他方式描述的任何過程或方法描述可以被理解為，表示包括一個或更多個用于實現特定邏輯功能或過程的步驟的可執行指令的代碼的模塊、片段或部分，并且本發明的優選實施方式的范圍包括另外的實現，其中可以不按所示出或討論的順序，包括根據所涉及的功能按基本同時的方式或按相反的順序，來執行功能，這應被本發明的實施例所屬【技術領域】的技術人員所理解。
[0041]在流程圖中表示或在此以其他方式描述的邏輯和/或步驟，例如，可以被認為是用于實現邏輯功能的可執行指令的定序列表，可以具體實現在任何計算機可讀介質中，以供指令執行系統、裝置或設備(如基于計算機的系統、包括處理器的系統或其他可以從指令執行系統、裝置或設備取指令并執行指令的系統)使用，或結合這些指令執行系統、裝置或設備而使用。就本說明書而言，"計算機可讀介質"可以是任何可以包含、存儲、通信、傳播或傳輸程序以供指令執行系統、裝置或設備或結合這些指令執行系統、裝置或設備而使用的裝置。計算機可讀介質的更具體的示例(非窮盡性列表)包括以下:具有一個或多個布線的電連接部(電子裝置)，便攜式計算機盤盒(磁裝置)，隨機存取存儲器(RAM)，只讀存儲器(ROM)，可擦除可編輯只讀存儲器(EPROM或閃速存儲器)，光纖裝置，以及便攜式光盤只讀存儲器(⑶ROM)。另外，計算機可讀介質甚至可以是可在其上打印所述程序的紙或其他合適的介質，因為可以例如通過對紙或其他介質進行光學掃描，接著進行編輯、解譯或必要時以其他合適方式進行處理來以電子方式獲得所述程序，然后將其存儲在計算機存儲器中。
[0042]應當理解，本發明的各部分可以用硬件、軟件、固件或它們的組合來實現。在上述實施方式中，多個步驟或方法可以用存儲在存儲器中且由合適的指令執行系統執行的軟件或固件來實現。例如，如果用硬件來實現，和在另一實施方式中一樣，可用本領域公知的下列技術中的任一項或他們的組合來實現:具有用于對數據信號實現邏輯功能的邏輯門電路的離散邏輯電路，具有合適的組合邏輯門電路的專用集成電路，可編程門陣列(PGA)，現場可編程門陣列(FPGA)等。
[0043]本【技術領域】的普通技術人員可以理解實現上述實施例方法攜帶的全部或部分步驟是可以通過程序來指令相關的硬件完成，所述的程序可以存儲于一種計算機可讀存儲介質中，該程序在執行時，包括方法實施例的步驟之一或其組合。
[0044]此外，在本發明各個實施例中的各功能單元可以集成在一個處理模塊中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個模塊中。上述集成的模塊既可以采用硬件的形式實現，也可以采用軟件功能模塊的形式實現。所述集成的模塊如果以軟件功能模塊的形式實現并作為獨立的產品銷售或使用時，也可以存儲在一個計算機可讀取存儲介質中。
[0045]上述提到的存儲介質可以是只讀存儲器，磁盤或光盤等。
[0046]在本說明書的描述中，參考術語“一個實施例”、“一些實施例”、“示例”、“具體示例”、或“一些示例”等的描述意指結合該實施例或示例描述的具體特征、結構、材料或者特點包含于本發明的至少一個實施例或示例中。在本說明書中，對上述術語的示意性表述不一定指的是相同的實施例或示例。而且，描述的具體特征、結構、材料或者特點可以在任何的一個或多個實施例或示例中以合適的方式結合。
[0047]盡管上面已經示出和描述了本發明的實施例，可以理解的是，上述實施例是示例性的，不能理解為對本發明的限制，本領域的普通技術人員在不脫離本發明的原理和宗旨的情況下在本發明的范圍內可以對上述實施例進行變化、修改、替換和變型。
【權利要求】
1.一種在Web前端進行合圖的方法，其特征在于，包括如下步驟: 獲得在Web頁面中輸入的多張待處理圖片，并通過實時訪問解析每張所述待處理圖片的原始引用位置標識，其中，所述原始引用位置標識與所述待處理圖片一一對應； 根據預設合并原則獲得所述多張待處理圖片的新引用位置標識，并利用所述新引用位置標識替換所述原始引用位置標識以將所述待處理圖片設置到對應的位置；以及 根據所述多張待處理圖片及對應的新引用位置標識實時生成合并圖并顯示給用戶。
2.如權利要求1所述的在Web前端進行合圖的方法，其特征在于，所述原始引用位置標識包括每張所述待處理圖片的原始引用坐標和原始引用地址， 所述新引用位置標識包括每張所述待處理圖片對應的新引用坐標和所述合并圖的新引用地址。
3.如權利要求2所述的在Web前端進行合圖的方法，其特征在于，所述利用所述新引用位置標識替換所述原始引用位置標識以將所述待處理圖片設置到對應的位置，包括: 利用每張所述待處理圖片的新引用坐標替換對應的待處理圖片的原始引用坐標； 將每張所述待處理圖片根據對應的唯一的KEY值，匹配獲得合成的所述合并圖的新引用地址，并通過實時訪問將所述待處理圖片的原始引用地址替換為所述合并圖的新引用地址，以將所述待處理圖片設置到對應的位置。
4.如權利要求2所述的在Web前端進行合圖的方法，其特征在于，還包括如下步驟:將實時生成的新引用坐標和新引用地址反饋并顯示給用戶。
5.如權利要求2-4任一項所述的在Web前端進行合圖的方法，其特征在于，所述待處理圖片的新引用坐標包括所述待處理圖片合并到所述Web頁面的對應區域的橫坐標和縱坐標。
6.如權利要求1所述的在Web前端進行合圖的方法，其特征在于，所述獲得在Web頁面中輸入的多張待處理圖片，還包括獲得所述多張待處理圖片的尺寸信息和內容信息。
7.如權利要求6所述的在Web前端進行合圖的方法，其特征在于，所述預設合并原則包括以下之一: (1)根據所述待處理圖片的尺寸信息逐次對所述多張待處理圖片進行合圖； (2)根據Web頁面中的多個區域的用戶關心程度和所述待處理圖片的內容信息對所述多張待處理圖片進行合圖。
8.如權利要求1所述的在Web前端進行合圖的方法，其特征在于，還包括如下步驟: 所述用戶通過Web頁面所述手動設置多張所述待處理圖片的新引用位置標識。
【文檔編號】G06T11/60GK103778651SQ201210411824
【公開日】2014年5月7日 申請日期:2012年10月24日 優先權日:2012年10月24日
【發明者】駱勤, 張袁煒 申請人:百度在線網絡技術（北京）有限公司