一種對終端顯示的圖片進行適配的方法及其系統(tǒng)的制作方法【
技術領域：
】[0001]本申請涉及圖片處理領域，尤其涉及一種對終端顯示的圖片進行適配的方法及其系統(tǒng)。【
背景技術：
】[0002]隨著通信技術的飛速發(fā)展，移動終端的便攜性使其成為通信設備的主流，其普及率遠遠高于PC機。然而，在手機等移動設備上瀏覽傳統(tǒng)的PC網站時，網站會等比例縮小，從而使得圖片內容需要拖動滾動條才能看到其全貌，且圖片本身較大，消耗流量較多，嚴重影響加載速度。這些因素都會導致移動端非常差的閱讀體驗。在移動互聯(lián)網領域，有效的將傳統(tǒng)互聯(lián)網上豐富的內容，特別是圖片內容，在移動設備上友好的展示給用戶，成為移動互聯(lián)網發(fā)展的過程的重要問題。即如何將圖片和文字等內容更好的展示給用戶，且適當減小圖片大小，節(jié)省移動端流量，提高網站在移動端的用戶體驗，成為該領域中一個非常重要的課題。【
發(fā)明內容】[0003]有鑒于此，本申請?zhí)峁┮环N對終端顯示的圖片進行適配的方法及其系統(tǒng)，可根據終端參數(shù)自動調整圖片大小。[0004]本申請?zhí)峁┮环N對終端顯示的圖片進行適配的方法，包括如下步驟:終端提交對網頁的訪問；獲得訪問終端的各項參數(shù)；抓取網頁D0M，獲取其中圖片的地址；根據終端的參數(shù)處理網頁中的圖片，并對處理后的圖片壓縮。[0005]其中獲得訪問終端的各項參數(shù)包括:當終端訪問網頁時，如果該網頁預先插入了可動態(tài)適配網頁的代碼，則該代碼調用云端服務器上提供的服務，向終端發(fā)送信息，獲得終端的各項參數(shù)。[0006]其中在網頁內插入可動態(tài)適配網頁的代碼包括在網頁的〈head〉標簽之后插入一行可動態(tài)適配網頁的代碼。[0007]其中該方法還包括步驟:將該網頁中圖片的地址替換為處理并壓縮后的網頁圖片的地址；將請求的網頁返回給終端，終端根據調整后的網頁的圖片的地址獲取所述處理后的壓縮的網頁圖片。[0008]進一步的，本申請還提供一種對終端顯示的圖片進行適配的系統(tǒng)，包括:終端:與服務器以及云端服務器通過網絡進行通信，向服務器發(fā)送訪問請求，訪問存儲在服務器上的網頁；服務器:其上存儲網頁，供終端訪問；云端服務器:包括如下部件:獲取單元:獲得訪問終端的各項參數(shù)；轉換單元:抓取網頁D0M，獲取其中圖片的地址；處理單元:根據終端的參數(shù)處理網頁中的圖片，并對處理后的圖片壓縮。[0009]其中該獲取單元進一步包括:參數(shù)提取單元:當終端訪問網頁時，如果該網頁預先插入了可動態(tài)適配網頁的代碼，則該代碼調用云端服務器上的參數(shù)提取單元，由參數(shù)提取單元向終端發(fā)送信息，獲得終端的各項參數(shù)；插入單元:在網頁的〈head〉標簽之后插入可動態(tài)適配網頁的代碼。[0010]云端服務器進一步包括:適配單元:將該網頁中圖片的地址替換為處理單元處理并壓縮后的網頁圖片的地址，以及將終端請求的網頁返回給終端，終端根據調整后的網頁的圖片的地址從處理單元中獲取所述處理后的壓縮的網頁圖片。[0011]由以上技術方案可見，本申請通過獲得終端參數(shù)，自動調整網頁中的圖片尺寸和位置，從而可做到根據終端顯示器的類型和顯示分辨率自動適配網頁中的內容特別是圖片的目的。[0012]通過本申請，可實現(xiàn)網頁的動態(tài)適配，從而在無需二次開發(fā)的前提下，動態(tài)調整網頁的呈現(xiàn)形式?！靖綀D說明】[0013]為了更清楚地說明本申請實施例或現(xiàn)有技術中的技術方案，下面將對實施例或現(xiàn)有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請中記載的一些實施例，對于本領域普通技術人員來講，還可以根據這些附圖獲得其他的附圖。[0014]圖1是本申請的系統(tǒng)結構圖；圖2是本申請云端服務器的結構圖；圖3是本申請云端服務器中處理單元的結構圖；圖4是本申請的方法流程圖；圖5是使用本申請的適配方法轉換后的網頁的前后對比圖?！揪唧w實施方式】[0015]本申請在終端訪問服務器中存儲的網頁時，根據終端的參數(shù)提供不同的頁面圖片加以顯示。通過本申請，用戶可在較短的響應時間內動態(tài)的獲得適于終端顯示的網頁及其圖片，從而獲得更好的瀏覽體驗。[0016]當然，實施本申請的任一技術方案必不一定需要同時達到以上的所有優(yōu)點。[0017]為了使本領域的人員更好地理解本申請中的技術方案，下面將結合本申請實施例中的附圖，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分實施例，而不是全部的實施例?；诒旧暾堉械膶嵤├绢I域普通技術人員所獲得的所有其他實施例，都應當屬于本申請保護的范圍。[0018]下面結合本申請附圖進一步說明本申請具體實現(xiàn)。[0019]本申請?zhí)峁┮环N對終端顯示的圖片進行適配的方法及其系統(tǒng)。[0020]參見圖1，該對終端顯示的圖片進行適配的系統(tǒng)包括服務器I和多個終端2以及云端服務器3，其中服務器I可為各種類型的服務器，用于與多個終端2互聯(lián)，其上存儲網頁內容，供與之連接的多個終端2訪問。多個終端2可為各種類型的移動設備、以及可以與服務器1，云端服務器3通信的各種有線或無線終端等。云端服務器3提供根據終端的參數(shù)對圖片進行適配的服務，可與服務器I以及終端2實現(xiàn)有線或無線的連接。具體的，該系統(tǒng)的各個組成部件為:終端2:與服務器I以及云端服務器3通過網絡進行通信，向服務器I發(fā)送訪問請求，訪問存儲在服務器I上的網頁。[0021]服務器1:其上存儲網頁，供各個終端訪問。[0022]云端服務器3，其具體構造如圖2所示，包括:獲取單元201:獲得訪問終端的各項參數(shù)。[0023]該獲取單元201進一步包括圖3所示的各部分:插入單元301:在網頁內插入可動態(tài)適配網頁的代碼。[0024]通過在服務器I提供的網頁上插入代碼，實現(xiàn)對云端服務器3上提供的各種服務的調用，這可通過多種插入技術實現(xiàn)，例如服務器I主動請求，或云端服務器3推送，插入方式例如可為在需要做適配的網頁的源代碼的〈headX/head〉標簽最開始的地方插入一行可動態(tài)適配網頁的代碼。該代碼實現(xiàn)對云端服務器上提供的各種適配服務的調用。[0025]參數(shù)提取單元302:獲得終端的各項參數(shù)。[0026]當終端2訪問服務器I上存儲的網頁時，如果該網頁預先插入了可動態(tài)適配網頁的代碼，則該網頁首先調用云端服務器3的獲取單元201中的參數(shù)提取單元302。參數(shù)提取單元302向終端2發(fā)送信息，獲得終端2的各項參數(shù)，例如終端的屏幕尺寸、屏幕的分辨率、用戶的清晰度設置、生產廠商名稱、設備機型等等。[0027]參見圖2，該云端服務器3還包括轉換單元202，其抓取網頁D0M，獲取其中圖片的地址。[0028]DOM為文檔對象模型(DocumentObjectModel，簡稱D0M)，是W3C(萬維網聯(lián)盟)組織推薦的處理可擴展標志語言的標準編程接口。[0029]由于HTML是一種格式化的語言，其中文本信息需要被放在HTML標簽中，由標簽提供對信息位置、顯示方式等修飾。HTML格式文件中，在根標簽下還具有〈head〉、〈body〉以及〈table〉等標簽，這些標簽由頂向下組成樹狀D0M。W3CDOM規(guī)范對HTML標簽和文本內容有如下的規(guī)定:#整個文檔是一個文檔節(jié)點?每個HTML標簽是一個元素節(jié)點籲包含在HTML元素中的文本是文本節(jié)點籲每一個HTML屬性是一個屬性節(jié)點據此，網頁DOM是由文本節(jié)點和標簽節(jié)點組成的一個樹狀組織結構，根據這些標簽生成網頁D0M。在生成網頁DOM的過程，抽取其中的圖片地址信息，例如根據標簽<img>中的srC，提取圖片地址。[0030]進一步的，參見圖2，該云端服務器包括:處理單元203:根據終端的參數(shù)處理網頁中的圖片，并對處理后的圖片壓縮。該處理單元可根據網頁中圖片的信息，例如圖片的類型、尺寸等，結合終端的各項參數(shù)，動態(tài)調整圖片。[0031]例如，根據圖片的類型調整，即如果終端不支持該圖片的類型，那么將終端不支持的圖片類型轉換成終端支持的格式，例如將PNG格式的圖片轉換為JPEG格式的圖片。處理單元也可判斷網頁中圖片的尺寸，是否與終端屏幕的顯示尺寸相適配，根據終端屏幕的顯示尺寸，動態(tài)調整圖片的大小。[0032]進一步的，參見圖2，該云端服務器包括:適配單元204:將該網頁中圖片的當前第1頁1 2