[發明專利]網頁圖片處理方法及裝置

在審

• 申請號: 201310487664.0
• 申請日: 2013-10-17
• 公開（公告）號: CN103577552A
• 公開（公告）日: 2014-02-12
• 發明（設計）人: 李成銀
• 申請（專利權）人: 北京奇虎科技有限公司;奇智軟件（北京）有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京思睿峰知識產權代理有限公司 11396
• 代理人: 趙愛軍

技術領域

本發明涉及網頁設計領域，具體涉及一種網頁圖片處理方法及裝置。

背景技術

在web(網頁)前端開發中，經常需要使用一些小圖片，一般可以通過css(層疊樣式表)中的background-image(背景圖片)屬性來引用這些小圖片。由于每個小圖片都是一個獨立的網絡資源，為了提高頁面訪問速度，出現了css?sprites(圖片合并)技術，其將一個頁面涉及到的多個零星的小圖片合并到一張大圖片中去，這樣，客戶端就不需要對每個小圖片進行單獨的請求，只需要請求合并后的大圖片，從而減少了網絡請求數。當整幅大圖片載入完成后，可以使用css方法通過設置background-position(背景位置)的方式來定位到小圖片在大圖片中的位置，完成所需圖片的準確調用。

現有的實現圖片合并的一種方案是完全人工通過photoshop軟件進行拼圖，css里的background-image(背景圖片)直接引用大圖片的地址，然后在photoshop里測量每張小圖片的位置，人工在對應的css里增加background-position的代碼。例如，測量一張小圖片在大圖片的位置為010px，那么需要在css里手工加上代碼：background-position：0-10px；。這種方式非常耗時耗力，并且如果有圖片增加、修改、刪除時都要重新打開photoshop軟件進行操作。

發明內容

鑒于上述問題，提出了本發明以便提供一種克服上述問題或者至少部分地解決上述問題的網頁圖片處理方法及裝置。

依據本發明的一個方面，提供了一種網頁圖片處理方法，其中，網頁的樣式表文件中包括對預定子目錄下的多張小圖片的引用，所述方法包括：

將預定子目錄下的多張小圖片合并成一張大圖片；

獲取每個小圖片在大圖片中的位置；

將所述樣式表文件中對每個小圖片的引用修改為對大圖片的引用，并在所述樣式表文件中添加小圖片在大圖片中的位置信息。

可選地，所述方法還包括：獲取所述樣式表文件的配置信息，并從所述配置信息中獲取待合并的多個小圖片所在的預定子目錄。

可選地，所述將所述樣式表文件中對每個小圖片的引用修改為對大圖片的引用，并在所述樣式表文件中添加小圖片在大圖片中的位置信息，包括：

將所述樣式表文件中引用小圖片的“背景圖片”屬性值修改為大圖片的url地址，并添加引用小圖片的“背景位置”屬性，將“背景位置”屬性值設置為小圖片在大圖片中的位置。

可選地，所述樣式表文件為css文件。

根據本發明的另一方面，提供了一種網頁圖片處理裝置，其中，網頁的樣式表文件中包括對預定子目錄下的多張小圖片的引用，所述裝置包括：

圖片合并單元，適于將預定子目錄下的多張小圖片合并成一張大圖片；

位置獲取單元，適于獲取每個小圖片在大圖片中的位置；

樣式表修改單元，適于將所述樣式表文件中對每個小圖片的引用修改為對大圖片的引用，并在所述樣式表文件中添加小圖片在大圖片中的位置信息。

可選地，所述裝置還包括配置信息獲取單元，適于獲取所述樣式表文件的配置信息，并從所述配置信息中獲取待合并的多個小圖片所在的預定子目錄。

可選地，所述樣式表修改單元進一步適于：將所述樣式表文件中引用小圖片的“背景圖片”屬性值修改為大圖片的u?rl地址，并添加引用小圖片的“背景位置”屬性，將“背景位置”屬性值設置為小圖片在大圖片中的位置。

可選地，所述樣式表文件為css文件。

根據本發明的上述技術方案，只要將待合并的多張小圖片放在同一個子目錄下，合并小圖片和替換樣式表文件代碼都可以自動化進行，從而大大提高了網頁開發的效率。由于每次樣式表文件代碼上線時都會基于子目錄下的圖片重新生成，所以有圖片增加、修改、刪除等操作時，只要修改子目錄下對應的圖片即可，基本上不用人工干預。

上述說明僅是本發明技術方案的概述，為了能夠更清楚了解本發明的技術手段，而可依照說明書的內容予以實施，并且為了讓本發明的上述和其它目的、特征和優點能夠更明顯易懂，以下特舉本發明的具體實施方式。

附圖說明

通過閱讀下文優選實施方式的詳細描述，各種其他的優點和益處對于本領域普通技術人員將變得清楚明了。附圖僅用于示出優選實施方式的目的，而并不認為是對本發明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中：