鬼佬大哥大
  • / 9
  • 下載費用:30 金幣  

一種定位圖片系統及方法.pdf

摘要
申請專利號:

CN201510569947.9

申請日:

2015.09.09

公開號:

CN105094930A

公開日:

2015.11.25

當前法律狀態:

實審

有效性:

審中

法律詳情: 實質審查的生效IPC(主分類):G06F 9/445申請日:20150909|||公開
IPC分類號: G06F9/445; G06F17/30 主分類號: G06F9/445
申請人: 上海斐訊數據通信技術有限公司
發明人: 唐芬芬
地址: 201616上海市松江區思賢路3666號
優先權:
專利代理機構: 上海碩力知識產權代理事務所31251 代理人: 郭桂峰
PDF完整版下載: PDF下載
法律狀態
申請(專利)號:

CN201510569947.9

授權公告號:

|||

法律狀態公告日:

2015.12.23|||2015.11.25

法律狀態類型:

實質審查的生效|||公開

摘要

本發明通過將多幅圖片按照一定的合成規則合并在一個合成圖片文件中,當瀏覽網頁時,只需加載一張圖片文件,便等于加載了此網頁所需顯示的所有圖片。再通過對CSS的屬性設置,將此合成圖片文件設置為背景圖片,通過設置背景圖片的邊距值使得背景圖片進行相對移動,使得網頁中圖片顯示位置能夠顯示所需的包含在合并圖片文件中的對應圖片。這種對同一圖片文件單次加載,多次使用的應用方式無疑大大降低了網頁中較多圖片顯示時的延時以及圖片顯示不全現象。

權利要求書

1.一種定位圖片系統,其特征在于,包括:
圖片合成模塊,用于將多幅圖片生成一個合成圖片文件;
圖片定位模塊,用于在合成圖片中定位所需顯示的圖片;
圖片顯示模塊,用于顯示定位后的圖片;
所述圖片定位模塊加載圖片合成模塊生成的合成圖片文件并定位所需顯
示的文件后通過圖片顯示模塊在網頁上進行展示。
2.根據權利要求1所述的一種定位圖片系統,其特征在于,所述合成模
塊包括圖片輸入模塊和圖片輸出模塊,所述圖片輸出模塊用于將圖片輸入模
塊輸入的多幅圖片按照系統參數輸出為一個合成圖片文件。
3.根據權利要求2所述的一種定位圖片系統,其特征在于,所述系統參
數包括圖片尺寸,圖片分辨率,圖片排布位置及方式。
4.根據權利要求1所述的一種定位圖片系統,其特征在于,所述圖片定
位模塊采用CSS樣式進行處理,包括屬性定義模塊和位置定義模塊;所述屬
性定義模塊用于加載所需的合成圖片以及定義圖片顯示方式;所述位置定義
模塊通過設定像素值定義欲顯示的圖片在合成圖片中的位置。
5.根據權利要求4所述的一種定位圖片系統,其特征在于,所述圖片顯
示方式包括平鋪、重復。
6.根據權利要求1所述的一種定位圖片系統,其特征在于,所述圖片顯
示模塊包括圖片對象模塊和圖片截取模塊;所述圖片對象模塊用于在網頁上
顯示圖片;所述圖片截取模塊根據網頁上的圖片對象的尺寸屬性,截取對應
尺寸的定位圖片并在圖片對象中顯示。
7.一種定位圖片方法,其特征在于:將欲在網頁中顯示的多個圖片文件
按照合成規則合并為一個合成圖片文件,通過在網頁中需要顯示圖片的位置
通過定義CSS樣式加載合成圖片文件并定位合成圖片文件中單個圖片文件的
位置,實現所需圖片在網頁中的顯示。
8.根據權利要求7所述的一種定位圖片方法,其特征在于,通過CSS定
位并顯示合成圖片文件中單個圖片文件的具體步驟為:
S1在網頁中需要顯示圖片的位置建立圖片對象并定義一個CSS樣式并將
其背景屬性值定義為加載合成圖片文件;
S2設置背景屬性中的合成圖片的顯示方式為不重復顯示;
S3設置背景屬性中的邊距參數來獲取合成圖片中單個圖片的位置參數;
S4根據網頁中圖片對象的高度值和寬度值對定位后的單個圖片進行截取
并在圖片對象中顯示。

說明書

一種定位圖片系統及方法

技術領域

本發明涉及圖片處理技術領域,尤指一種在網頁中定位及顯示圖片的方法。

背景技術

為了使網站豐富多彩,更有表現力,網頁中往往需要應用到大量的圖片,
但如何處理這些圖片,并且使其不影響網頁載入和解析是一個不小的問題,這
直接關系到用戶體驗。

目前的做法是,需要哪張圖片就處理哪張圖片,在網頁上需要顯示圖片的
區域單獨引用并加載某一張或某一組特定圖片。此方法在做圖片切換時,如果
做了兩張不同的圖片時,若網絡信號或網絡速度不佳,后續圖片不能及時加載
并顯示出來,并且如果圖片較大加載需要等待較長的時間,這樣會經常出現圖
片丟失,未加載等現象,影響用戶瀏覽網頁信息。

發明內容

本發明為了解決上述技術在網速不佳狀態下無法順暢顯示圖片的問題,提
供一種利用多幅合成圖片提高網頁中圖片的加載及顯示速度,提高用戶訪
問網頁時的流暢度。

為了實現本發明以上發明目的,本發明是通過以下技術方案實現的:

這種定位圖片系統,包括:圖片合成模塊,用于將多幅圖片生成一個合成
圖片文件;圖片定位模塊,用于在合成圖片中定位所需顯示的圖片;圖片顯示
模塊,用于顯示定位后的圖片;所述圖片定位模塊加載圖片合成模塊生成的合
成圖片文件并定位所需顯示的文件后通過圖片顯示模塊在網頁上進行展示。

所述合成模塊包括圖片輸入模塊和圖片輸出模塊,所述圖片輸出模塊用于
將圖片輸入模塊輸入的多幅圖片按照系統參數輸出為一個合成圖片文件。

所述系統參數包括圖片尺寸,圖片分辨率,圖片排布位置及方式。

所述圖片定位模塊采用CSS樣式進行處理,包括屬性定義模塊和位置定義
模塊;所述屬性定義模塊用于加載所需的合成圖片以及定義圖片顯示方式;所
述位置定義模塊通過設定像素值定義欲顯示的圖片在合成圖片中的位置。

所述圖片顯示方式包括平鋪、重復。

所述圖片顯示模塊包括圖片對象模塊和圖片截取模塊;所述圖片對象模塊
用于在網頁上顯示圖片;所述圖片截取模塊根據網頁上的圖片對象的尺寸屬性,
截取對應尺寸的定位圖片并在圖片對象中顯示。

將欲在網頁中顯示的多個圖片文件按照合成規則合并為一個合成圖片文
件,通過在網頁中需要顯示圖片的位置通過定義CSS(層疊樣式表)加載合成
圖片文件并定位合成圖片文件中單個圖片文件的位置,實現所需圖片在網頁中
的顯示。

網頁中需要顯示圖片的位置建立圖片對象并定義一個CSS樣式并將其背
景屬性值定義為加載合成圖片文件;

設置背景屬性中的合成圖片的顯示方式為不重復顯示;

設置背景屬性中的邊距參數來獲取合成圖片中單個圖片的位置參數;

根據網頁中圖片對象的高度值和寬度值對定位后的單個圖片進行截取并
在圖片對象中顯示。

本發明通過將多幅圖片按照一定的合成規則合并在一個合成圖片文件中,
當瀏覽網頁時,只需加載一張圖片文件,便等于加載了此網頁所需顯示的所有
圖片。再通過對CSS(層疊樣式表)的屬性設置,將此合成圖片文件設置為背
景圖片,通過設置背景圖片的邊距值使得背景圖片進行相對移動,使得網頁中
圖片顯示位置能夠顯示所需的包含在合并圖片文件中的對應圖片。這種對同一
圖片文件單次加載,多次使用的應用方式無疑大大降低了網頁中較多圖片顯示
時的延時以及圖片顯示不全現象。

附圖說明

下面結合附圖和具體實施方式對本發明作進一步詳細說明:

圖1為定位圖片系統的第一實施例示意圖;

圖2為定位圖片方法的第一實施例流程示意圖;

圖3為定位圖片系統的第二實施例示意圖;

圖4為定位圖片系統的第二實施例的通過CSS定位并顯示合成圖片文件中
單個圖片文件的流程示意圖;

圖5為定位圖片系統的第三實施例的合成圖片文件示意圖;

圖中:

1圖片合并模塊1.1圖片輸入模塊1.2圖片輸出模塊2圖片定位模
塊2.1屬性定義模塊2.2位置定義模塊3圖像顯示模塊3.1圖片對象
模塊3.2圖片截取模塊。

具體實施方式

為了更清楚地說明本發明實施例或現有技術中的技術方案,下面將對實施
例或現有技術描述中所需要使用的附圖作簡單地介紹,顯而易見地,以下說明
和附圖對于本發明是示例性的,并且不應被理解為限制本發明。以下說明描述
了眾多具體細節以方便對本發明理解。然而,在某些實例中,熟知的或常規的
細節并未說明,以滿足說明書簡潔的要求。

CSS,全稱為CascadingStyleSheets,中文名為層疊樣式表,也稱作層疊樣
式表,是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標
準通用標記語言的一個子集)等文件樣式的計算機語言。通過樣式表可以定義
如何顯示HTML元素,例如字體標簽和顏色屬性等。樣式通常保存在外部
的.css文件中。通過僅僅編輯一個簡單的CSS文檔,外部樣式表能夠同時改
變站點中所有頁面的布局和外觀,只需簡單地改變樣式,然后網站中的所有元
素均會自動地更新。

CSS樣式包括背景、文本、字體、鏈接、列表、表格和輪廓。CSS的背景
屬性允許應用純色為背景,也允許使用圖像作為背景。CSS的文本屬性可以改
變文字的顏色、字符間距、對齊文本等。CSS的字體屬性可以定義文本所使用
的字體、大小,風格(如斜體)等。

第一實施例

如圖1所示的定位圖片系統的第一實施例示意圖以及如圖2所示的定位圖
片方法的第一實施例流程示意圖,這種定位圖片系統,包括:圖片合成模塊1,
用于將多幅圖片生成一個合成圖片文件;圖片定位模塊2,用于在合成圖片中
定位所需顯示的圖片;圖片顯示模塊3,用于顯示定位后的圖片;所述圖片定
位模塊加載圖片合成模塊生成的合成圖片文件并定位所需顯示的文件后通過
圖片顯示模塊在網頁上進行展示。

第二實施例

如圖3所示的定位圖片系統的第二實施例示意圖,圖片合成模塊1包括圖
片輸入模塊1.1和圖片輸出模塊1.2,圖片輸出模塊1.2用于將圖片輸入模塊1.1
輸入的多幅圖片按照系統參數輸出為一個合成圖片文件。

系統參數包括圖片尺寸,圖片分辨率,圖片排布位置及方式。

圖片定位模塊2采用CSS(層疊樣式表),包括屬性定義模塊2.1和位置
定義模塊2.2;所述屬性定義模塊2.1用于加載所需的合成圖片以及定義圖片顯
示方式;所述位置定義模塊2.2通過設定像素值定義欲顯示的圖片在合成圖片
中的位置。

圖片顯示方式包括平鋪、重復。

圖片顯示模塊3包括圖片對象模塊3.1和圖片截取模塊3.2;所述圖片對象
模塊3.1用于在網頁上顯示圖片;所述圖片截取模塊3.2根據網頁上的圖片對
象的尺寸屬性,截取對應尺寸的定位圖片并在圖片對象中顯示。

如圖4所示的定位圖片系統的第二實施例的通過CSS定位并顯示合成圖片
文件中單個圖片文件的流程示意圖,通過這種定位圖片的方法,

S1在網頁中需要顯示圖片的位置建立圖片對象并定義一個CSS樣式并將
其背景屬性值定義為加載合成圖片文件;

S2設置背景屬性中的合成圖片的顯示方式為不重復顯示;

S3設置背景屬性中的邊距參數來獲取合成圖片中單個圖片的位置參數;

S4根據網頁中圖片對象的高度值和寬度值對定位后的單個圖片進行截取
并在圖片對象中顯示;

將欲在網頁中顯示的多個圖片文件按照合成規則合并為一個合成圖片文
件,通過在網頁中需要顯示圖片的位置通過定義CSS加載合成圖片文件并定位
合成圖片文件中單個圖片文件的位置,實現所需圖片在網頁中的顯示。

第三實施例

以圖5所示定位圖片系統的第三實施例的合成圖片文件,以兩個圖片,圖
片A與圖片B為例,首先將圖片A、B均處理為100×100像素大小,然后將
圖片A、B由上至下依次排列,形成100×200像素的合成圖片文件,合成圖片
文件名設為ltlogo.tif并保存備用。此處合成圖片文件格式不僅限于GIF格式,
任何可通過圖片對象顯示的圖片格式均可供選擇。

通過CSS定位并顯示合成圖片文件中單個圖片文件的具體步驟為:

在網頁中需要顯示圖片的位置建立圖片對象并定義一個CSS(層疊樣式表)
樣式并將其背景屬性值定義為之前保存的100×200像素的合成圖片文件;具
體的CSS表達式為{background:url("img/ltlogo.tif")no-repeatleft101px;},通過
background的背景屬性加載之前保存的合成圖片文件ltlogo.tif,no-repeat設置
圖片的顯示方式為不重復,即按原圖片文件格式顯示,不做拉伸、平鋪等處理;
left101px用于設置背景屬性中的左邊距參數來獲取合成圖片中單個圖片的位
置參數;若需顯示合成圖片文件中排列第二的圖片,則將左邊距設置為101像
素,則可顯示從左側向下第101像素開始顯示的圖片,左側1至100像素內的
圖片,即排列第一的圖片不會顯示。

最后,根據網頁上圖片對象模塊3.1的尺寸屬性,圖像截取模塊3.2對定
位后的圖片進行截取,使其適合在圖片對象模塊3.1中顯示。

在網頁上不同圖片對象模塊上重復上述方法,通過一次性加載同一個合成
圖像文件,并通過CSS進行圖片定位,使得各個圖片對象模塊可以顯示所需的
圖片。這種單次加載,多次使用的圖片加載和使用方式,能夠有效地提高網頁
中圖片顯示的流暢度,提高用戶體驗。

關 鍵 詞:
一種 定位 圖片 系統 方法
  專利查詢網所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:一種定位圖片系統及方法.pdf
鏈接地址:http://www.wwszu.club/p-6401742.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服客服 - 聯系我們

[email protected] 2017-2018 zhuanlichaxun.net網站版權所有
經營許可證編號:粵ICP備17046363號-1 
 


收起
展開
鬼佬大哥大