圖片合并方法和圖片合并系統(tǒng)的制作方法
【專利摘要】本發(fā)明提供了一種圖片合并系統(tǒng)和圖片合并方法，圖片合并方法包括：復制步驟，掃描開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，并將所述級聯(lián)樣式表文件復制到產(chǎn)品態(tài)目錄下；查找步驟，讀取所述開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，查找出所述級聯(lián)樣式表文件中引用的圖片；處理步驟，計算所述圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對應的引用的圖片的路徑修改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖片中添加所述目標坐標信息；圖片生成步驟，根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生成所述預合成圖片。通過本發(fā)明的技術方案，可以滿足不同項目組對于圖片的個性化需求，從而提供一種簡單、易用、自動的圖片合并工具。
【專利說明】圖片合并方法和圖片合并系統(tǒng)

【技術領域】
[0001] 本發(fā)明涉及圖片處理【技術領域】，具體而言，涉及一種圖片合并方法和圖片合并系 統(tǒng)。

【背景技術】
[0002] 在大型的網(wǎng)站中，會存在大量的圖片，客戶端每加載一張圖片就會向服務器發(fā)送 一次http請求，這樣就會給服務器一定的壓力，影響網(wǎng)頁的加載性能。
[0003] 針對上面的問題，很多的互聯(lián)網(wǎng)公司都用了圖片合并的解決方案。首先將這些 大量瑣碎的圖片合成一張大圖，之后綜合運用CSS(Cascading Style Sheets,級聯(lián)樣式 表）的background-position、width、height在合并大圖中對小圖進行準確定位，其中 background-position代表小圖在大圖中的坐標值，width和height代表頁面元素的寬和 商。
[0004] 這個解決方案能帶來以下的好處。
[0005] 1)大幅度減少圖片的http請求次數(shù)，從而提高網(wǎng)頁的加載速度。
[0006] 2)有效的減小圖片的大小，實踐證明合并大圖的大小小于小圖大小的總和。
[0007] 3)網(wǎng)頁圖片顯示過程的整體性增強，當合并的大圖加載完成后，網(wǎng)頁中的圖片會 同時顯示出來，而不是每個圖片單獨顯示出來。
[0008] 4)方便網(wǎng)站風格變換，當需要改變網(wǎng)站的主題色時，只需更改一張圖片的色彩即 可。
[0009] 圖1是百度首頁的合成圖片的片段。這種方案提高了網(wǎng)站的性能，增強了用戶體 驗。但是，也有很多的不足。
[0010] 如圖2的流程所示，首先是在構(gòu)建階段，先要把所有的小圖利用畫圖工具手工合 并成一張大圖，然后再利用工具精確定位小圖在大圖中的坐標值，并將其整理成一個Excel 表格，之后再在CSS中加入每一個圖片的坐標值?？梢娺@個過程是極其繁瑣和麻煩的，當圖 片數(shù)量非常大時，需要付出很大的精力和耐心。而且，這個過程可能需要開發(fā)和UE的共同 參與下完成。
[0011] 然后是維護階段，如果需要變更圖片，重新構(gòu)建合并大圖已經(jīng)是不可能的事情了， 這樣只能通過增加圖片和修改CSS完成。如果網(wǎng)站有頻繁的變更網(wǎng)頁圖片的需求，合并大 圖的體積可能就會迅速增長，直到無法維護而重新手工構(gòu)建。這些工作也需要開發(fā)和UE協(xié) 調(diào)下完成。
[0012] 綜上，很多互聯(lián)網(wǎng)公司采用的大量圖片合并方案雖然帶來了很多性能和體驗上的 提升，但是其構(gòu)建維護過程過于繁瑣，且不能滿足圖片重復渲染的需求。
[0013] 因此，需要一種新的技術方案，可以滿足不同項目組對于圖片的個性化需求，從而 提供一種簡單、易用、自動的圖片合并工具。


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

[0014] 本發(fā)明正是基于上述問題，提出了一種新的技術方案，可以滿足不同項目組對于 圖片的個性化需求，從而提供一種簡單、易用、自動的圖片合并工具。
[0015] 有鑒于此，本發(fā)明提出了一種圖片合并方法，包括：復制步驟，掃描開發(fā)態(tài)目錄下 的級聯(lián)樣式表文件，并將所述級聯(lián)樣式表文件復制到產(chǎn)品態(tài)目錄下；查找步驟，讀取所述開 發(fā)態(tài)目錄下的級聯(lián)樣式表文件，查找出所述級聯(lián)樣式表文件中引用的圖片；處理步驟，計算 所述圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對應的引用的圖片的路 徑修改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖片中添加所述目標坐 標信息；圖片生成步驟，根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生 成所述預合成圖片。
[0016] 在該技術方案中，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響正 常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人員 專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和 只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完成。 同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。
[0017] 在上述技術方案中，優(yōu)選地，所述處理步驟還包括：根據(jù)所述圖片的背景重繪屬性 信息，將所述圖片分成第一類圖片和第二類圖片，計算所述第一類圖片在所述預合成圖片 中的縱向坐標，以得到所述第一類圖片的第一目標坐標信息，其中，所述第一類圖片的橫向 坐標為零；計算所述第二類圖片在所述預合成圖片中的橫向坐標，以得到所述第二類圖片 的第二目標坐標信息，其中，所述第二類圖片的縱向坐標為零；將所述第一類圖片的路徑和 所述第一目標坐標信息添加到水平重繪圖片隊列，將所述第二類圖片的路徑和所述第二目 標坐標信息添加到垂直重繪圖片隊列；將所述第一類圖片和所述第二類圖片的路徑修改為 所述預合成圖片的路徑，并在所述第一類圖片中添加所述第一目標坐標信息，在所述第二 類圖片中添加所述第二目標坐標信息。
[0018] 在該技術方案中，通過構(gòu)建水平方向和垂直方向上的兩個大圖，可以實現(xiàn)圖片的 水平和垂直方向的重復渲染，從而使圖片可以適應不同的屏幕分辨率。
[0019] 在上述技術方案中，優(yōu)選地，所述處理步驟還包括：獲取所述第一類圖片和所述第 二類圖片的高度信息和寬度信息；根據(jù)所述第一類圖片的高度信息計算所述第一類圖片在 所述預合成圖片中的縱向坐標，其中，所述縱向坐標為讀取過的水平重繪圖片的高度之和； 根據(jù)所述第二類圖片的寬度信息計算所述第二類圖片在所述預合成圖片中的橫向坐標，其 中，所述橫向坐標為讀取過的垂直重繪圖片的寬度之和。
[0020] 在上述技術方案中，優(yōu)選地，所述圖片生成步驟具體包括：計算所述水平重繪圖片 隊列中第一類圖片的最大寬度之和和最大高度之和，根據(jù)所述最大寬度之和和所述最大高 度之和生成空白的所述預合成圖片生成空白的第一預合成圖片；計算所述垂直重繪圖片隊 列中第二類圖片的最大寬度之和和最大高度之和，根據(jù)所述最大寬度之和和所述最大高度 之和生成空白的第二預合成圖片；根據(jù)所述第一類圖片的第一目標坐標信息確定所述第一 類圖片在所述第一預合成圖片中的第一位置；根據(jù)所述第二類圖片的第二目標坐標信息確 定所述第二類圖片在所述第二預合成圖片中的第二位置；將所述第一類圖片從所述第一位 置沿水平方向繪制，直到繪制的圖片的寬度等于所述第一類圖片的最大寬度，以得到繪制 后的第一預合成圖片；將所述第二類圖片從所述第二位置沿垂直方向繪制，直到繪制的圖 片的高度等于所述第二類圖片的最大高度，以得到繪制后的第二預合成圖片。
[0021] 在該技術方案中，通過上述過程，就可以實現(xiàn)將需要水平重繪或垂直重繪的圖片 合成到一張大圖中，從而可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速 度。
[0022] 在上述技術方案中，優(yōu)選地，所述圖片生成步驟還包括：將所述繪制后的第一預合 成圖片和所述繪制后的第二預合成圖片進行合并，以得到繪制后的預合成圖片。
[0023] 在該技術方案中，可以將水平重繪和堅直重繪以及其他默認不需要重復繪制的圖 片都合成到一張圖片中，這樣，不但可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng) 頁加載速度，同時還可以使合并圖能夠滿足瀏覽器的圖片重復渲染機制，以適應不同屏幕 的分辨率。
[0024] 根據(jù)本發(fā)明的另一方面，還提供了一種圖片合并系統(tǒng)，包括：復制單元，掃描開發(fā) 態(tài)目錄下的級聯(lián)樣式表文件，并將所述級聯(lián)樣式表文件復制到產(chǎn)品態(tài)目錄下；查找單元，讀 取所述開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，查找出所述級聯(lián)樣式表文件中引用的圖片；處理 單元，計算所述圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對應的引用 的圖片的路徑修改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖片中添加 所述目標坐標信息；圖片生成單元，根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖 片的路徑生成所述預合成圖片。
[0025] 在該技術方案中，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響正 常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人員 專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和 只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完成。 同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。
[0026] 在上述技術方案中，優(yōu)選地，所述處理單元還包括：分類單元，根據(jù)所述圖片的背 景重繪屬性信息，將所述圖片分成第一類圖片和第二類圖片，第一計算單元，計算所述第一 類圖片在所述預合成圖片中的縱向坐標，以得到所述第一類圖片的第一目標坐標信息，其 中，所述第一類圖片的橫向坐標為零；第二計算單元，計算所述第二類圖片在所述預合成圖 片中的橫向坐標，以得到所述第二類圖片的第二目標坐標信息，其中，所述第二類圖片的縱 向坐標為零；隊列構(gòu)建單元，將所述第一類圖片的路徑和所述第一目標坐標信息添加到水 平重繪圖片隊列，將所述第二類圖片的路徑和所述第二目標坐標信息添加到垂直重繪圖片 隊列；坐標添加單元，將所述第一類圖片和所述第二類圖片的路徑修改為所述預合成圖片 的路徑，并在所述第一類圖片中添加所述第一目標坐標信息，在所述第二類圖片中添加所 述第二目標坐標信息。
[0027] 在該技術方案中，通過構(gòu)建水平方向和垂直方向上的兩個大圖，可以實現(xiàn)圖片的 水平和垂直方向的重復渲染，從而使圖片可以適應不同的屏幕分辨率。
[0028] 在上述技術方案中，優(yōu)選地，所述處理單元還包括：信息獲取單元，獲取所述第一 類圖片和所述第二類圖片的高度信息和寬度信息；第三計算單元，根據(jù)所述第一類圖片的 高度信息計算所述第一類圖片在所述預合成圖片中的縱向坐標，其中，所述縱向坐標為讀 取過的水平重繪圖片的高度之和；第四計算單元，根據(jù)所述第二類圖片的寬度信息計算所 述第二類圖片在所述預合成圖片中的橫向坐標，其中，所述橫向坐標為讀取過的垂直重繪 圖片的寬度之和。
[0029] 在上述技術方案中，優(yōu)選地，所述圖片生成單元具體包括：第一空白圖片生成單 元，計算所述水平重繪圖片隊列中第一類圖片的最大寬度之和和最大高度之和，根據(jù)所述 最大寬度之和和所述最大高度之和生成空白的所述預合成圖片生成空白的第一預合成圖 片；第二空白圖片生成單元，計算所述垂直重繪圖片隊列中第二類圖片的最大寬度之和和 最大高度之和，根據(jù)所述最大寬度之和和所述最大高度之和生成空白的第二預合成圖片； 第一位置確定單元，根據(jù)所述第一類圖片的第一目標坐標信息確定所述第一類圖片在所述 第一預合成圖片中的第一位置；第二位置確定單元，根據(jù)所述第二類圖片的第二目標坐標 信息確定所述第二類圖片在所述第二預合成圖片中的第二位置；第一繪制單元，將所述第 一類圖片從所述第一位置沿水平方向繪制，直到繪制的圖片的寬度等于所述第一類圖片的 最大寬度，以得到繪制后的第一預合成圖片；第二繪制單元，將所述第二類圖片從所述第二 位置沿垂直方向繪制，直到繪制的圖片的高度等于所述第二類圖片的最大高度，以得到繪 制后的第二預合成圖片。
[0030] 在該技術方案中，通過上述過程，就可以實現(xiàn)將需要水平重繪或垂直重繪的圖片 合成到一張大圖中，從而可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速 度。
[0031] 在上述技術方案中，優(yōu)選地，所述圖片生成單元還包括：合成單元，將所述繪制后 的第一預合成圖片和所述繪制后的第二預合成圖片進行合并，以得到繪制后的預合成圖 片。
[0032] 在該技術方案中，可以將水平重繪和堅直重繪以及其他默認不需要重復繪制的圖 片都合成到一張圖片中，這樣，不但可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng) 頁加載速度，同時還可以使合并圖能夠滿足瀏覽器的圖片重復渲染機制，以適應不同屏幕 的分辨率。
[0033] 通過以上技術方案，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響 正常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人 員專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改 和只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完 成。同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。

【專利附圖】

【附圖說明】
[0034] 圖1示出了相關技術中合并圖片段的效果示意圖；
[0035] 圖2示出了相關技術中圖片合并方法的流程圖；
[0036] 圖3示出了根據(jù)本發(fā)明的實施例的圖片合并方法的流程圖；
[0037] 圖4示出了根據(jù)本發(fā)明的實施例的圖片合并系統(tǒng)的框圖；
[0038] 圖5示出了根據(jù)本發(fā)明的實施例的圖片合并方法的具體流程圖；
[0039] 圖6示出了根據(jù)本發(fā)明的實施例的修改CSS文件的流程圖；
[0040] 圖7示出了根據(jù)本發(fā)明的實施例的圖片合并的流程圖；
[0041] 圖8示出了根據(jù)本發(fā)明的實施例的合并后圖片的效果示意圖。

【具體實施方式】
[0042] 為了能夠更清楚地理解本發(fā)明的上述目的、特征和優(yōu)點，下面結(jié)合附圖和具體實 施方式對本發(fā)明進行進一步的詳細描述。需要說明的是，在不沖突的情況下，本申請的實施 例及實施例中的特征可以相互組合。
[0043] 在下面的描述中闡述了很多具體細節(jié)以便于充分理解本發(fā)明，但是，本發(fā)明還可 以采用其他不同于在此描述的其他方式來實施，因此，本發(fā)明的保護范圍并不受下面公開 的具體實施例的限制。
[0044] 圖3示出了根據(jù)本發(fā)明的實施例的圖片合并方法的流程圖。
[0045] 如圖3所示，根據(jù)本發(fā)明的實施例的圖片合并方法，包括：復制步驟302,掃描開發(fā) 態(tài)目錄下的CSS文件，并將所述CSS文件復制到產(chǎn)品態(tài)目錄下；查找步驟304,讀取所述開 發(fā)態(tài)目錄下的CSS文件，查找出所述CSS文件中引用的圖片；處理步驟306,計算所述圖片 在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對應的引用的圖片的路徑修改為 所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖片中添加所述目標坐標信息； 圖片生成步驟308,根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生成所 述預合成圖片。
[0046] 在該技術方案中，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響正 常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人員 專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和 只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完成。 同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。
[0047] 在上述技術方案中，優(yōu)選地，所述處理步驟306還包括：根據(jù)所述圖片的背景重繪 屬性信息，將所述圖片分成第一類圖片和第二類圖片，計算所述第一類圖片在所述預合成 圖片中的縱向坐標，以得到所述第一類圖片的第一目標坐標信息，其中，所述第一類圖片的 橫向坐標為零；計算所述第二類圖片在所述預合成圖片中的橫向坐標，以得到所述第二類 圖片的第二目標坐標信息，其中，所述第二類圖片的縱向坐標為零；將所述第一類圖片的路 徑和所述第一目標坐標信息添加到水平重繪圖片隊列，將所述第二類圖片的路徑和所述第 二目標坐標信息添加到垂直重繪圖片隊列；將所述第一類圖片和所述第二類圖片的路徑修 改為所述預合成圖片的路徑，并在所述第一類圖片中添加所述第一目標坐標信息，在所述 第二類圖片中添加所述第二目標坐標信息。
[0048] 在該技術方案中，通過構(gòu)建水平方向和垂直方向上的兩個大圖，可以實現(xiàn)圖片的 水平和垂直方向的重復渲染，從而使圖片可以適應不同的屏幕分辨率。
[0049] 在上述技術方案中，優(yōu)選地，所述處理步驟306還包括：獲取所述第一類圖片和所 述第二類圖片的高度信息和寬度信息；根據(jù)所述第一類圖片的高度信息計算所述第一類圖 片在所述預合成圖片中的縱向坐標，其中，所述縱向坐標為讀取過的水平重繪圖片的高度 之和；根據(jù)所述第二類圖片的寬度信息計算所述第二類圖片在所述預合成圖片中的橫向坐 標，其中，所述橫向坐標為讀取過的垂直重繪圖片的寬度之和。
[0050] 在上述技術方案中，優(yōu)選地，所述圖片生成步驟308具體包括：計算所述水平重繪 圖片隊列中第一類圖片的最大寬度之和和最大高度之和，根據(jù)所述最大寬度之和和所述最 大高度之和生成空白的所述預合成圖片生成空白的第一預合成圖片；計算所述垂直重繪圖 片隊列中第二類圖片的最大寬度之和和最大高度之和，根據(jù)所述最大寬度之和和所述最大 高度之和生成空白的第二預合成圖片；根據(jù)所述第一類圖片的第一目標坐標信息確定所述 第一類圖片在所述第一預合成圖片中的第一位置；根據(jù)所述第二類圖片的第二目標坐標信 息確定所述第二類圖片在所述第二預合成圖片中的第二位置；將所述第一類圖片從所述第 一位置沿水平方向繪制，直到繪制的圖片的寬度等于所述第一類圖片的最大寬度，以得到 繪制后的第一預合成圖片；將所述第二類圖片從所述第二位置沿垂直方向繪制，直到繪制 的圖片的高度等于所述第二類圖片的最大高度，以得到繪制后的第二預合成圖片。
[0051] 在該技術方案中，通過上述過程，就可以實現(xiàn)將需要水平重繪或垂直重繪的圖片 合成到一張大圖中，從而可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速 度。
[0052] 在上述技術方案中，優(yōu)選地，所述圖片生成步驟308還包括：將所述繪制后的第一 預合成圖片和所述繪制后的第二預合成圖片進行合并，以得到繪制后的預合成圖片。
[0053] 在該技術方案中，可以將水平重繪和堅直重繪以及其他默認不需要重復繪制的圖 片都合成到一張圖片中，這樣，不但可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng) 頁加載速度，同時還可以使合并圖能夠滿足瀏覽器的圖片重復渲染機制，以適應不同屏幕 的分辨率。
[0054] 圖4示出了根據(jù)本發(fā)明的實施例的圖片合并系統(tǒng)的框圖。
[0055] 如圖4所示，根據(jù)本發(fā)明的實施例的圖片合并系統(tǒng)400,包括：復制單元402,掃描 開發(fā)態(tài)目錄下的CSS文件，并將所述CSS文件復制到產(chǎn)品態(tài)目錄下；查找單元404,讀取所 述開發(fā)態(tài)目錄下的CSS文件，查找出所述CSS文件中引用的圖片；處理單元406,計算所述 圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對應的引用的圖片的路徑修 改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖片中添加所述目標坐標信 息；圖片生成單元408,根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生 成所述預合成圖片。
[0056] 在該技術方案中，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響正 常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人員 專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和 只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完成。 同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。
[0057] 在上述技術方案中，優(yōu)選地，所述處理單元406還包括：分類單元4062,根據(jù)所 述圖片的背景重繪屬性信息，將所述圖片分成第一類圖片和第二類圖片；第一計算單元 4064,計算所述第一類圖片在所述預合成圖片中的縱向坐標，以得到所述第一類圖片的第 一目標坐標信息，其中，所述第一類圖片的橫向坐標為零；第二計算單元4066,計算所述第 二類圖片在所述預合成圖片中的橫向坐標，以得到所述第二類圖片的第二目標坐標信息， 其中，所述第二類圖片的縱向坐標為零；隊列構(gòu)建單元4068,將所述第一類圖片的路徑和 所述第一目標坐標信息添加到水平重繪圖片隊列，將所述第二類圖片的路徑和所述第二目 標坐標信息添加到垂直重繪圖片隊列；坐標添加單元40610,將所述第一類圖片和所述第 二類圖片的路徑修改為所述預合成圖片的路徑，并在所述第一類圖片中添加所述第一目標 坐標信息，在所述第二類圖片中添加所述第二目標坐標信息。
[0058] 在該技術方案中，通過構(gòu)建水平方向和垂直方向上的兩個大圖，可以實現(xiàn)圖片的 水平和垂直方向的重復渲染，從而使圖片可以適應不同的屏幕分辨率。
[0059] 在上述技術方案中，優(yōu)選地，所述處理單元406還包括：信息獲取單元40612,獲取 所述第一類圖片和所述第二類圖片的高度信息和寬度信息；第三計算單元40614,根據(jù)所 述第一類圖片的高度信息計算所述第一類圖片在所述預合成圖片中的縱向坐標，其中，所 述縱向坐標為讀取過的水平重繪圖片的高度之和；第四計算單元40616,根據(jù)所述第二類 圖片的寬度信息計算所述第二類圖片在所述預合成圖片中的橫向坐標，其中，所述橫向坐 標為讀取過的垂直重繪圖片的寬度之和。
[0060] 在上述技術方案中，優(yōu)選地，所述圖片生成單元408具體包括：第一空白圖片生成 單元4082,計算所述水平重繪圖片隊列中第一類圖片的最大寬度之和和最大高度之和，根 據(jù)所述最大寬度之和和所述最大高度之和生成空白的所述預合成圖片生成空白的第一預 合成圖片；第二空白圖片生成單元4084,計算所述垂直重繪圖片隊列中第二類圖片的最大 寬度之和和最大高度之和，根據(jù)所述最大寬度之和和所述最大高度之和生成空白的第二預 合成圖片；第一位置確定單元4086,根據(jù)所述第一類圖片的第一目標坐標信息確定所述第 一類圖片在所述第一預合成圖片中的第一位置；第二位置確定單元，根據(jù)所述第二類圖片 的第二目標坐標信息確定所述第二類圖片在所述第二預合成圖片中的第二位置；第一繪制 單元4088,將所述第一類圖片從所述第一位置沿水平方向繪制，直到繪制的圖片的寬度等 于所述第一類圖片的最大寬度，以得到繪制后的第一預合成圖片；第二繪制單元40810,將 所述第二類圖片從所述第二位置沿垂直方向繪制，直到繪制的圖片的高度等于所述第二類 圖片的最大高度，以得到繪制后的第二預合成圖片。
[0061] 在該技術方案中，通過上述過程，就可以實現(xiàn)將需要水平重繪或垂直重繪的圖片 合成到一張大圖中，從而可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速 度。
[0062] 在上述技術方案中，優(yōu)選地，所述圖片生成單元408還包括：合成單元40812,將所 述繪制后的第一預合成圖片和所述繪制后的第二預合成圖片進行合并，以得到繪制后的預 合成圖片。
[0063] 在該技術方案中，可以將水平重繪和堅直重繪以及其他默認不需要重復繪制的圖 片都合成到一張圖片中，這樣，不但可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng) 頁加載速度，同時還可以使合并圖能夠滿足瀏覽器的圖片重復渲染機制，以適應不同屏幕 的分辨率。
[0064] 通過以上技術方案，將產(chǎn)品態(tài)目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響 正常的開發(fā)態(tài)的文件。并且整個圖片合并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人 員專注設計，而不必關注合并過程。其中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改 和只存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完 成。同時將圖片合并，可以大幅減小http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。 [0065] 圖5示出了根據(jù)本發(fā)明的實施例的圖片合并方法的具體流程圖。
[0066] 如圖5所示，根據(jù)本發(fā)明的實施例的圖片合并方法的具體流程如下：
[0067] 步驟502,掃描并復制開發(fā)態(tài)下的CSS文件到產(chǎn)品態(tài)目錄下。這樣，將產(chǎn)品態(tài)目錄 和開發(fā)態(tài)目錄的分離，使得合并文件不影響正常的開發(fā)態(tài)的文件。
[0068] 步驟504,遍歷所有CSS文件和CSS文件中的引用圖片，修改CSS，并將圖片路徑按 遍歷順序放入到圖片隊列中。即主要是修改CSS文件，在每個引用圖片后面加上坐標。
[0069] 步驟506,圖片的合并。從圖片隊列中讀取圖片，按一定的規(guī)則對圖片進行合并。
[0070] 下面詳細說明修改CSS文件和圖片合成的具體流程。
[0071] 如圖6所示，根據(jù)本發(fā)明的實施例的修改CSS文件的流程如下：
[0072] 步驟602，讀取一個CSS文件。
[0073] 步驟604,定位到包含有引用圖片路徑的一行。
[0074] 步驟606,獲取圖片的高度和寬度。
[0075] 步驟608,判斷background-repeat的值（X或Y)，根據(jù)判斷結(jié)果將圖片分成兩類。 如需要水平重繪和不需要重繪的分到一類，需要垂重繪的分到一類。
[0076] 步驟610，對于水平重繪的圖片，計算小圖在大圖中縱向的坐標，縱向坐標=讀取 過的水平重繪圖片高度和，橫向坐標=0。
[0077] 步驟612,將小圖路徑和坐標信息加入水平重繪圖片隊列。
[0078] 步驟 614,修改 background-image 為 V. png。
[0079] 步驟616，對于垂直重繪的圖片，計算小圖在大圖中橫向向的坐標，橫向坐標=讀 取過的垂直重繪圖片寬度和，縱向坐標=0。
[0080] 步驟618,將小圖路徑和坐標信息加入垂直重繪圖片隊列。
[0081] 步驟 62〇,修改 background-image 為 h. png。
[0082] 步驟622,將橫向坐標和縱向坐標加入到CSS中。
[0083] 步驟624,判斷是否結(jié)束。當判斷結(jié)果為是時，結(jié)束步驟，否則返回步驟604。
[0084] 上述流程是修改一個CSS文件的過程，可見經(jīng)過這個過程，會完成兩部分的工作： 一部分是修改了 CSS文件中引用圖片路徑為大圖文件路徑和加入了小圖在大圖中的坐標 值；另一部分是生成了兩個圖片路徑隊列，一個是需水平重復的圖片隊列，一個是需垂直重 復的圖片隊列，它們存放了圖片的路徑和要在大圖中繪制的坐標信息，用于下一步圖片的 合并處理。
[0085] 下面以水平方向重繪的圖片為例，詳細說明圖片合并的過程。
[0086] 如圖7所示，圖片合并包括以下步驟：
[0087] 步驟702,計算水平重繪圖片隊列中的圖片的最大寬度和高度之和。
[0088] 步驟704,生成一張空白的大圖，寬度和高度等于上一步的寬度和高度。
[0089] 步驟706,從隊列中取出一個圖片信息。
[0090] 步驟708,根據(jù)圖片的縱向坐標定位小圖在大圖中的位置。
[0091] 步驟710,將小圖從指定位置處沿水平方向重復繪制，直到達到最大寬度。
[0092] 步驟712,判斷水平重繪隊列中是否還有元素，當判斷結(jié)果為是時，返回步驟706， 否則，結(jié)束流程。
[0093] 經(jīng)過上面過程就能將需要水平重繪的圖片自動的合成一張大圖v. png，默認不需 重復繪制的圖片也會合到這張圖中，該圖如圖8所示，瀏覽器用background-position中的 坐標可以定位到小圖的位置，再根據(jù)要填充的網(wǎng)頁元素的height和width即可實現(xiàn)與未做 圖片合并之前同樣的顯示效果。
[0094] 綜上所述，本技術方案具有以下特點：
[0095] 1、開發(fā)態(tài)和產(chǎn)品態(tài)的分離。產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和只 存合并圖片的拷貝，開發(fā)人員只需關注開發(fā)態(tài)目錄，產(chǎn)品態(tài)的目錄由工具自動構(gòu)建完成。
[0096] 2、利用background-position、width、height來在合并的大圖中定位小圖中的位 置。
[0097] 3、工具自動化遍歷開發(fā)目錄下的所有CSS文件，找出CSS中引用的圖片，計算其在 大圖中的坐標，修改相應產(chǎn)品態(tài)CSS的background-image, background-position,并將其 加到大圖中。
[0098] 4、支持圖片的水平和垂直方向重復渲染機制。通過構(gòu)建兩張合并大圖h. png和 V. png來實現(xiàn)，h. png用來存放需要垂直重繪的圖片，整體表現(xiàn)為一張橫向的大圖，V. png存 放需要水平重繪的圖片，整體表現(xiàn)為一張垂直的大圖。
[0099] 5、基于Ant腳本來實現(xiàn)自動化的構(gòu)建過程，中間件啟動過程中執(zhí)行構(gòu)建腳本，完 成全部的構(gòu)建工作。
[0100] 6、中間件啟動后，如需變更圖片，只需要運行一次腳本，無需重啟中間件，即可實 現(xiàn)合并圖片的熱替換。
[0101] 7、全程基本上無需設計人員、開發(fā)人員參與。
[0102] 以上結(jié)合附圖詳細說明了本發(fā)明的技術方案，通過本發(fā)明的技術方案，將產(chǎn)品態(tài) 目錄和開發(fā)態(tài)目錄分離，這樣，使得合并文件不影響正常的開發(fā)態(tài)的文件。并且整個圖片合 并過程完全自動化，使得開發(fā)人員專注開發(fā)，設計人員專注設計，而不必關注合并過程。其 中，產(chǎn)品態(tài)的目錄是開發(fā)態(tài)目錄的一份經(jīng)過CSS修改和只存合并圖片的拷貝，開發(fā)人員只 需關注開發(fā)態(tài)目錄，廣品態(tài)的目錄由工具自動構(gòu)建完成。同時將圖片合并，可以大幅減小 http請求數(shù)量，減輕服務器壓力，提高網(wǎng)頁加載速度。
[0103] 以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領域的技 術人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修 改、等同替換、改進等，均應包含在本發(fā)明的保護范圍之內(nèi)。
【權利要求】
1. 一種圖片合并方法，其特征在于，包括： 復制步驟，掃描開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，并將所述級聯(lián)樣式表文件復制到產(chǎn) 品態(tài)目錄下； 查找步驟，讀取所述開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，查找出所述級聯(lián)樣式表文件中 引用的圖片； 處理步驟，計算所述圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對 應的引用的圖片的路徑修改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖 片中添加所述目標坐標信息； 圖片生成步驟，根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生成所 述預合成圖片。
2. 根據(jù)權利要求1所述的圖片合并方法，其特征在于，所述處理步驟還包括： 根據(jù)所述圖片的背景重繪屬性信息，將所述圖片分成第一類圖片和第二類圖片， 計算所述第一類圖片在所述預合成圖片中的縱向坐標，以得到所述第一類圖片的第一 目標坐標信息，其中，所述第一類圖片的橫向坐標為零； 計算所述第二類圖片在所述預合成圖片中的橫向坐標，以得到所述第二類圖片的第二 目標坐標信息，其中，所述第二類圖片的縱向坐標為零； 將所述第一類圖片的路徑和所述第一目標坐標信息添加到水平重繪圖片隊列，將所述 第二類圖片的路徑和所述第二目標坐標信息添加到垂直重繪圖片隊列； 將所述第一類圖片和所述第二類圖片的路徑修改為所述預合成圖片的路徑，并在所述 第一類圖片中添加所述第一目標坐標信息，在所述第二類圖片中添加所述第二目標坐標信 息。
3. 根據(jù)權利要求2所述的圖片合并方法，其特征在于，所述處理步驟還包括： 獲取所述第一類圖片和所述第二類圖片的高度信息和寬度信息； 根據(jù)所述第一類圖片的高度信息計算所述第一類圖片在所述預合成圖片中的縱向坐 標，其中，所述縱向坐標為讀取過的水平重繪圖片的高度之和； 根據(jù)所述第二類圖片的寬度信息計算所述第二類圖片在所述預合成圖片中的橫向坐 標，其中，所述橫向坐標為讀取過的垂直重繪圖片的寬度之和。
4. 根據(jù)權利要求3所述的圖片合并方法，其特征在于，所述圖片生成步驟具體包括： 計算所述水平重繪圖片隊列中第一類圖片的最大寬度之和和最大高度之和，根據(jù)所述 最大寬度之和和所述最大高度之和生成空白的所述預合成圖片生成空白的第一預合成圖 片； 計算所述垂直重繪圖片隊列中第二類圖片的最大寬度之和和最大高度之和，根據(jù)所述 最大寬度之和和所述最大高度之和生成空白的第二預合成圖片； 根據(jù)所述第一類圖片的第一目標坐標信息確定所述第一類圖片在所述第一預合成圖 片中的第一位置； 根據(jù)所述第二類圖片的第二目標坐標信息確定所述第二類圖片在所述第二預合成圖 片中的第二位置； 將所述第一類圖片從所述第一位置沿水平方向繪制，直到繪制的圖片的寬度等于所述 第一類圖片的最大寬度，以得到繪制后的第一預合成圖片； 將所述第二類圖片從所述第二位置沿垂直方向繪制，直到繪制的圖片的高度等于所述 第二類圖片的最大高度，以得到繪制后的第二預合成圖片。
5. 根據(jù)權利要求4所述的圖片合并方法，其特征在于，所述圖片生成步驟還包括： 將所述繪制后的第一預合成圖片和所述繪制后的第二預合成圖片進行合并，以得到繪 制后的預合成圖片。
6. -種圖片合并系統(tǒng)，其特征在于，包括： 復制單元，掃描開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，并將所述級聯(lián)樣式表文件復制到產(chǎn) 品態(tài)目錄下； 查找單元，讀取所述開發(fā)態(tài)目錄下的級聯(lián)樣式表文件，查找出所述級聯(lián)樣式表文件中 引用的圖片； 處理單元，計算所述圖片在預合成圖片中的目標坐標信息，并將所述產(chǎn)品態(tài)目錄下對 應的引用的圖片的路徑修改為所述預合成圖片的路徑，以及在所述產(chǎn)品態(tài)目錄下的所述圖 片中添加所述目標坐標信息； 圖片生成單元，根據(jù)所述圖片中的所述目標坐標信息和所述預合成圖片的路徑生成所 述預合成圖片。
7. 根據(jù)權利要求6所述的圖片合并系統(tǒng)，其特征在于，所述處理單元還包括： 分類單元，根據(jù)所述圖片的背景重繪屬性信息，將所述圖片分成第一類圖片和第二類 圖片； 第一計算單元，計算所述第一類圖片在所述預合成圖片中的縱向坐標，以得到所述第 一類圖片的第一目標坐標信息，其中，所述第一類圖片的橫向坐標為零； 第二計算單元，計算所述第二類圖片在所述預合成圖片中的橫向坐標，以得到所述第 二類圖片的第二目標坐標信息，其中，所述第二類圖片的縱向坐標為零； 隊列構(gòu)建單元，將所述第一類圖片的路徑和所述第一目標坐標信息添加到水平重繪圖 片隊列，將所述第二類圖片的路徑和所述第二目標坐標信息添加到垂直重繪圖片隊列； 坐標添加單元，將所述第一類圖片和所述第二類圖片的路徑修改為所述預合成圖片的 路徑，并在所述第一類圖片中添加所述第一目標坐標信息，在所述第二類圖片中添加所述 第二目標坐標信息。
8. 根據(jù)權利要求7所述的圖片合并系統(tǒng)，其特征在于，所述處理單元還包括： 信息獲取單元，獲取所述第一類圖片和所述第二類圖片的高度信息和寬度信息； 第三計算單元，根據(jù)所述第一類圖片的高度信息計算所述第一類圖片在所述預合成圖 片中的縱向坐標，其中，所述縱向坐標為讀取過的水平重繪圖片的高度之和； 第四計算單元，根據(jù)所述第二類圖片的寬度信息計算所述第二類圖片在所述預合成圖 片中的橫向坐標，其中，所述橫向坐標為讀取過的垂直重繪圖片的寬度之和。
9. 根據(jù)權利要求8所述的圖片合并系統(tǒng)，其特征在于，所述圖片生成單元具體包括： 第一空白圖片生成單元，計算所述水平重繪圖片隊列中第一類圖片的最大寬度之和和 最大高度之和，根據(jù)所述最大寬度之和和所述最大高度之和生成空白的所述預合成圖片生 成空白的第一預合成圖片； 第二空白圖片生成單元，計算所述垂直重繪圖片隊列中第二類圖片的最大寬度之和和 最大高度之和，根據(jù)所述最大寬度之和和所述最大高度之和生成空白的第二預合成圖片； 第一位置確定單元，根據(jù)所述第一類圖片的第一目標坐標信息確定所述第一類圖片在 所述第一預合成圖片中的第一位置； 第二位置確定單元，根據(jù)所述第二類圖片的第二目標坐標信息確定所述第二類圖片在 所述第二預合成圖片中的第二位置； 第一繪制單元，將所述第一類圖片從所述第一位置沿水平方向繪制，直到繪制的圖片 的寬度等于所述第一類圖片的最大寬度，以得到繪制后的第一預合成圖片； 第二繪制單元，將所述第二類圖片從所述第二位置沿垂直方向繪制，直到繪制的圖片 的高度等于所述第二類圖片的最大高度，以得到繪制后的第二預合成圖片。
10.根據(jù)權利要求9所述的圖片合并系統(tǒng)，其特征在于，所述圖片生成單元還包括： 合成單元，將所述繪制后的第一預合成圖片和所述繪制后的第二預合成圖片進行合 并，以得到繪制后的預合成圖片。
【文檔編號】G06F17/30GK104063492SQ201410318927
【公開日】2014年9月24日 申請日期:2014年7月4日 優(yōu)先權日:2014年7月4日
【發(fā)明者】田孝啟, 李傳忠 申請人:用友軟件股份有限公司