網頁中的圖片顯示方法、裝置及終端的制作方法
【專利摘要】本發明實施例公開了一種網頁中的圖片顯示方法、裝置及終端，屬于數字圖像處理領域。該方法包括：在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；獲取圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據；在創建的畫布中渲染調整后的圖片的待渲染數據，在網頁中顯示圖片。本發明通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，從而可根據屏幕分辨率適應性調整需要渲染的圖片的待渲染數據的大小，對于屏幕分辨率較低的顯示設備而言，顯示圖片速度快。
【專利說明】網頁中的圖片顯示方法、裝置及終端
【技術領域】
[0001]本發明涉及數字圖像處理領域，特別涉及一種網頁中的圖片顯示方法、裝置及終端。
【背景技術】
[0002]隨著信息技術的不斷發展，人們更加頻繁的使用移動設備端來處理日常事務。處理日常事務經常離不開互聯網的幫助，這促使越來越多的網站開始支持移動設備端的網頁瀏覽。在瀏覽過程中進行的滾動網頁、縮放頁面等操作會造成移動設備的原生應用軟件顯示網頁，而網頁中的圖片是占用資源較多內容之一。如何高效地對網頁中的圖片進行顯示，從而快速連接互聯網是人們需要解決的問題。
[0003]目前，移動設備的原生應用軟件有兩種對網頁中的圖片進行顯示的方式，第一種方式:通過HTML (Hypertext Markup Language,超文本標記語言)在圖片所在網頁的顯示區域創建圖片的占位空間；通過MG標簽的SRC (Source，源)屬性和ALT (Alter，改變)屬性分別設置圖片的URL (Uniform Resource Locator,統一資源定位符)值和圖片的替代文本；向網絡側發送獲取圖片的待渲染數據請求，獲取圖片的待渲染數據；如果成功獲取圖片的待渲染數據，則根據獲取到的圖片的待渲染數據按照圖片的原始大小在圖片所在網頁的顯示區域來渲染并顯示圖片。第二種方式:通過CSS (Cascading Style Sheet,樣式表)的背景圖像屬性將需要顯示的圖片放入背景；通過背景圖像屬性設置圖片的URL值；向網絡側發送獲取圖片的待渲染數據請求，獲取圖片的待渲染數據；如果成功獲取圖片的待渲染數據，則根據獲取到的圖片的待渲染數據按照圖片的原始大小在圖片所在網頁的顯示區域來渲染并顯示圖片。
[0004]在實現本發明的過程中，發明人發現目前網頁中的圖片顯示技術至少存在以下問題:
[0005]采用MG標簽和CSS顯示網頁中的圖片時，需要按照圖片的原始大小在圖片所在網頁的顯示區域來渲染并顯示圖片，對于屏幕分辨率比較低的顯示設備而言，其占用的資源過多，導致圖片的顯示速度較慢，因而在打開圖片較多的網頁時，有可能會導致顯示的網頁出現卡死的現象。

【發明內容】

[0006]為了解決目前網頁中的圖片顯示技術存在的問題，本發明實施例提供了一種網頁中的圖片顯示方法、裝置及終端。
[0007]—方面，提供了一種網頁中的圖片顯示方法，所述方法包括:
[0008]在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布；
[0009]獲取所述圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0010]在創建的畫布中渲染調整后的所述圖片的待渲染數據，在所述網頁中顯示所述圖片。
[0011]優選地，所述在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布，包括:
[0012]在加載所述網頁時，在所述圖片的顯示區域使用canvas參數創建與所述顯示區域大小相同的畫布。
[0013]優選地，所述獲取所述圖片的待渲染數據，包括:
[0014]使用圖像接口向網絡側發送加載所述圖片的HTTP (Hyper Text TransportProtocol,超文本傳輸協議)請求,所述HTTP請求中攜帶所述圖片對應的URL ；
[0015]接收所述網絡側根據所述HTTP請求返回的所述圖片的待渲染數據。
[0016]優選地，所述獲取所述圖片的待渲染數據之后，包括:
[0017]將所述獲取到的圖片的待渲染數據存儲到腳本文件中；
[0018]所述在創建的畫布中渲染調整后的所述圖片的待渲染數據之后，還包括:
[0019]從所述腳本文件中讀出所述獲取到的圖片的待渲染數據，在顯示的畫布中渲染所述獲取到的圖片的待渲染數據。
[0020]優選地，所述根據屏幕分辨率調整獲取到的圖片的待渲染數據，還包括:
[0021]根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的所述圖片的待渲染數據。
[0022]另一方面，提供了一種網頁中的圖片顯示裝置，所述裝置包括:
[0023]創建模塊，用于在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布；
[0024]獲取模塊，用于獲取所述圖片的待渲染數據；
[0025]調整模塊，用于根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0026]渲染模塊，用于在創建的畫布中渲染調整后的所述圖片的待渲染數據；
[0027]顯示模塊，用于在網頁中顯示所述圖片。
[0028]優選地，所述創建模塊，用于在加載所述網頁時，在所述圖片的顯示區域使用canvas參數創建與所述顯示區域大小相同的畫布。
[0029]優選地，所述獲取模塊，包括:
[0030]發送單元，用于使用圖像接口向網絡側發送加載所述圖片的HTTP請求，所述HTTP請求中攜帶所述圖片對應的URL ；
[0031]接收單元，用于接收所述網絡側根據所述HTTP請求返回的所述圖片的待渲染數據。
[0032]優選地，所述終端，還包括:
[0033]存儲模塊，用于將所述獲取到的圖片的待渲染數據存儲到腳本文件中；
[0034]所述渲染模塊，用于從所述腳本文件中讀出所述圖片的待渲染數據，并根據屏幕分辨率調整讀出的圖片的待渲染數據，在創建的畫布中渲染所述調整后的圖片的待渲染數據。
[0035]優選地，調整模塊，用于根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的所述圖片的待渲染數據。[0036]還提供了一種終端，所述終端有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲于存儲器中，且經配置以由一個或者一個以上處理器執行所述一個或者一個以上程序包含用于進行以下操作的指令:
[0037]在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布；
[0038]獲取所述圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0039]在創建的畫布中渲染調整后的所述圖片的待渲染數據，在所述網頁中顯示所述圖片。
[0040]本發明實施例提供的技術方案帶來的有益效果是:
[0041]通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度。
[0042]另外，通過將獲取到的圖片的待渲染數據存儲在腳本文件中，從而在重繪過程中，可以直接從腳本文件中讀出獲取到的圖片的待渲染數據，并在顯示的畫布中渲染獲取到的圖片的待渲染數據，而無需再向網絡側發送加載圖片的HTTP請求，進一步減少了資源的占用，加快了顯示圖片的速度。
【專利附圖】

【附圖說明】
[0043]為了更清楚地說明本發明實施例中的技術方案，下面將對實施例描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。
[0044]圖1是本發明實施例一提供的一種網頁中的圖片顯示方法流程圖；
[0045]圖2是本發明實施例二提供的一種網頁中的圖片顯示方法流程圖；
[0046]圖3是本發明實施例二提供的一種網頁中的圖片顯示顯示界面示意圖；
[0047]圖4是本發明實施例三提供的一種網頁中的圖片顯示方法流程圖；
[0048]圖5是本發明實施例四提供的一種網頁中的圖片顯示裝置的結構示意圖；
[0049]圖6是本發明實施例四提供的一種獲取模塊的內部結構示意圖；
[0050]圖7是本發明實施例四提供的一種網頁中的圖片顯示裝置的結構示意圖；
[0051]圖8是本發明實施例五提供的一種終端的結構示意圖。
【具體實施方式】
[0052]為使本發明的目的、技術方案和優點更加清楚，下面將結合附圖對本發明實施方式作進一步地詳細描述。
[0053]實施例一
[0054]本發明實施例提供了一種網頁中的圖片顯示方法，參見圖1，方法流程包括:
[0055]101:在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；[0056]102:獲取圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0057]103:在創建的畫布中渲染調整后的圖片的待渲染數據，在所述網頁中顯示圖片。
[0058]本發明實施例提供的方法，通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度。
[0059]實施例二
[0060]結合上述實施例一的內容，本發明實施例提供了一種網頁中的圖片顯示方法。參見圖2，方法流程包括:
[0061]201:在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；
[0062]針對該步驟，創建的畫布用于后續步驟中渲染調整后的圖片的待渲染數據。創建畫布的方式包括但不限于:在加載網頁時，在圖片的顯示區域使用canvas參數創建與顯示區域大小相同的畫布。需要說明的是，由于還沒有獲取圖片的待渲染數據，所以創建的畫布是空白的畫布。關于創建畫布的方式，除了上述創建方式外，還可以采用其他方式創建，本實施例對此不作具體限定。
[0063]為了便于理解，以如圖3 (I)所示的網頁為例進行說明。例如，設圖片A為網頁中的圖片，圖片A的高度和寬度均為400像素。則如圖3(2)所示，在加載網頁時，在圖片A所在顯示區域使用canvas參數創建與圖片A的顯示區域大小相同的畫布A’，創建的畫布A’的高度和寬度均為400像素。由于還沒有獲取圖片A的待渲染數據，所以創建的畫布A’是空白的畫布。
[0064]202:使用圖像接口向網絡側發送加載圖片的HTTP請求，HTTP請求中攜帶圖片對應的URL ；
[0065]針對該步驟，HTTP請求能夠完成終端和網絡側之間的通信。關于發送加載圖片的HTTP請求的方式，可使用終端的圖像接口完成向網絡側的服務器發送加載圖片的HTTP請求。進一步地,HTTP請求中的內容包括但不限于:請求行、消息報頭、請求正文等。其中，請求行包括但不限于:請求方法、URL、HTTP請求的協議版本、回車和換行等。
[0066]203:接收網絡側根據HTTP請求返回的圖片的待渲染數據；
[0067]網絡側在接收到HTTP請求后，將對該HTTP請求返回對應的響應，該響應中包括但不限于關于HTTP請求的狀態信息以及被請求的內容，在本實施例中，該被請求的內容即為圖片的待渲染數據。可由終端的圖像接口接收網絡側根據HTTP請求返回的HTTP請求的狀態信息和圖片的待渲染數據。
[0068]204:將獲取到的圖片的待渲染數據存儲在腳本文件中；
[0069]該步驟為可選的優選步驟，本實施例對將獲取到的圖片的待渲染數據存儲在腳本文件中的方式不進行限定，通過將獲取到的圖片的待渲染數據存儲在腳本文件中，可使后續步驟重繪該圖片時，無需再向網絡側請求該圖片的待渲染數據，進而節省因進行網絡交互而占用的資源，從而加快顯示圖片的速度。
[0070]205:根據屏幕分辨率調整獲取到的圖片的待渲染數據；[0071]根據屏幕分辨率調整獲取到的圖片的待渲染數據的方式包括但不限于根據屏幕分辨率調整獲取到的圖片的待渲染數據中的圖片分辨率。需要說明的是，屏幕分辨率就是屏幕上顯示的像素點個數，以水平像素點個數*垂直像素點個數的形式表示；圖片分辨率就是圖片上用于存儲信息的像素點個數，以水平像素點個數*垂直像素點個數的形式表示。在屏幕分辨率比較低的情況下，調整需要渲染的像素點個數時，可以舍棄圖片的待渲染數據中的不必要的像素點，即減少需要渲染的像素點個數，從而提高后續渲染的速度。
[0072]為了便于理解，以屏幕分辨率為300*300，獲取到的圖片的待渲染數據中圖片分辨率為400*400為例，則根據屏幕分辨率調整需要渲染的像素點個數時，可舍棄圖片的待渲染數據中的不必要像素點，使調整后的圖片的待渲染數據中的圖片分辨率變成300*300。
[0073]206:在創建的畫布中渲染調整后的圖片的待渲染數據，在網頁中顯示圖片；
[0074]針對該步驟，由于創建的畫布是在網頁中的圖片的顯示區域創建的，又由于創建的畫布是空白畫布，因此，通過在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，實現將網頁中的圖片進行顯示。
[0075]其中，由于調整后的圖片的待渲染數據是根據屏幕分辨率調整的，針對圖片的原始尺寸比較大的情況，通過根據屏幕分辨率調整圖片的待渲染數據，之后再在創建的畫布中渲染調整后的圖片的待渲染數據，因此，達到了壓縮圖片的效果，可使圖片的顯示效果達到最優。
[0076]進一步地，通過上述步驟201至步驟206即完成了圖片的顯示過程。針對網頁刷新等需要對顯示的圖片進行重繪的情況，本實施例提供的方法還包括后續步驟。
[0077]207:從腳本文件中讀出獲取到的圖片的待渲染數據，并根據屏幕分辨率調整讀出的圖片的待渲染數據；
[0078]具體地，由于預先已將獲取到的圖片的待渲染數據存儲在腳本文件中，因此，在確定需要重繪圖片時，可直接從腳本文件中讀出獲取到的圖片的待渲染數據，而無需再向網絡側請求圖片的待渲染數據，進而節省因進行網絡交互而占用的資源，從而加快顯示圖片的速度。具體實施時，可采用數據讀取的方式從腳本文件中讀出獲取到的圖片的待渲染數據的方式。
[0079]進一步地，為了使重繪的圖片過程仍然可以根據屏幕分辨率適應性調整，從而降低占用的資源，加快顯示圖片的速度，本實施例提供的方法在從腳本文件中讀出獲取到的圖片的待渲染數據之后，還包括根據屏幕分辨率調整讀出的圖片的待渲染數據的過程。關于根據屏幕分辨率調整讀出的圖片的待渲染數據的方式，本實施例不作具體限定，此處根據屏幕分辨率調整讀出的圖片的待渲染數據的方式與根據屏幕分辨率調整獲取到的圖片的待渲染數據的方式相同，具體可參考上述步驟205中的內容，此處不再贅述。
[0080]208:在創建的畫布中渲染調整后的圖片的待渲染數據，在網頁中顯示圖片。
[0081]針對該步驟，在創建的畫布中渲染調整后的圖片的待渲染數據的方式與上述步驟206的方式相同，具體可參考上述步驟206中的內容，此處不再贅述。
[0082]本發明實施例提供的方法，通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度；
[0083]通過將獲取到的圖片的待渲染數據存儲在腳本文件中，從而在重繪過程中，可以直接從腳本文件中讀出獲取到的圖片的待渲染數據，并對讀出的圖片的待渲染數據進行調整后，在顯示的畫布中渲染調整后的圖片的待渲染數據，而無需再向網絡側發送加載圖片的HTTP請求，進一步減少了資源的占用，加快了顯示圖片的速度。
[0084]實施例三
[0085]結合上述實施例一的內容，本發明實施例提供了一種網頁中的圖片顯示方法。參見圖4，方法流程包括:
[0086]401:在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；
[0087]針對該步驟，創建的畫布用于后續步驟中渲染調整后的圖片的待渲染數據。創建畫布的方式包括但不限于:在加載網頁時，在圖片的顯示區域使用canvas參數創建與顯示區域大小相同的畫布。需要說明的是，由于還沒有獲取圖片的待渲染數據，所以創建的畫布是空白的畫布。關于創建畫布的方式，除了上述創建方式外，還可以采用其他方式創建，本實施例對此不作具體限定。
[0088]為了便于理解，以如圖3 (I)所示的網頁為例進行說明。例如，設圖片A為網頁中的圖片，圖片A的高度和寬度均為400像素。則如圖3(2)所示，在加載網頁時，在圖片A所在顯示區域使用canvas參數創建與圖片A的顯示區域大小相同的畫布A’，創建的畫布A’的高度和寬度均為400像素。由于還沒有獲取圖片A的待渲染數據，所以創建的畫布A’是空白的畫布。
[0089]402:使用圖像接口向網絡側發送加載圖片的HTTP請求，HTTP請求中攜帶圖片對應的URL ；
[0090]針對該步驟，HTTP請求能夠完成終端和網絡側之間的通信。關于發送加載圖片的HTTP請求的方式，可使用終端的圖像接口完成向網絡側的服務器發送加載圖片的HTTP請求。進一步地,HTTP請求中的內容包括但不限于:請求行、消息報頭、請求正文等。其中，請求行包括但不限于:請求方法、URL、HTTP請求的協議版本、回車和換行等。
[0091]403:接收網絡側根據HTTP請求返回的圖片的待渲染數據；
[0092]網絡側在接收到HTTP請求后，將對該HTTP請求返回對應的響應，該響應中包括但不限于關于HTTP請求的狀態信息以及被請求的內容，在本實施例中，該被請求的內容即為圖片的待渲染數據。可由終端的圖像接口接收網絡側根據HTTP請求返回的HTTP請求的狀態信息和圖片的待渲染數據。
[0093]404:根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0094]根據屏幕分辨率調整獲取到的圖片的待渲染數據的方式包括但不限于根據屏幕分辨率調整獲取到的圖片的待渲染數據中的圖片分辨率。需要說明的是，屏幕分辨率就是屏幕上顯示的像素點個數，以水平像素點個數*垂直像素點個數的形式表示；圖片分辨率就是圖片上用于存儲信息的像素點個數，以水平像素點個數*垂直像素點個數的形式表示。在屏幕分辨率比較低的情況下，調整需要渲染的像素點個數時，可以舍棄圖片的待渲染數據中的不必要的像素點，即減少需要渲染的像素點個數，從而提高后續渲染的速度。
[0095]為了便于理解，以屏幕分辨率為300*300，獲取到的圖片的待渲染數據中圖片分辨率為400*400為例，則根據屏幕分辨率調整需要渲染的像素點個數時，可舍棄圖片的待渲染數據中的不必要像素點，使調整后的圖片的待渲染數據中的圖片分辨率變成300*300。
[0096]405:將調整后的圖片的待渲染數據存儲到腳本文件中；
[0097]針對該步驟，本實施例不對將調整后的圖片的待渲染數據存儲在腳本文件中的方式進行限定，通過將調整后的圖片的待渲染數據存儲在腳本文件中，可使后續步驟無需再向網絡側請求該圖片的待渲染數據，進而節省因進行網絡交互而占用的資源，從而加快顯示圖片的速度。
[0098]406:在創建的畫布中渲染調整后的圖片的待渲染數據，在網頁中顯示圖片；
[0099]針對該步驟，由于創建的畫布是在網頁中的圖片的顯示區域創建的，又由于創建的畫布是空白畫布，因此，通過在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，實現將網頁中的圖片進行顯示。
[0100]其中，由于調整后的圖片的待渲染數據是根據屏幕分辨率調整的，針對圖片的原始尺寸比較大的情況，通過根據屏幕分辨率調整圖片的待渲染數據，之后再在創建的畫布中渲染調整后的圖片的待渲染數據，因此，達到了壓縮圖片的效果，可使圖片的顯示效果達到最優。
[0101]進一步地，通過上述步驟401至步驟406即完成了圖片的顯示過程。針對網頁刷新等需要對顯示的圖片進行重繪的情況，本實施例提供的方法還包括后續步驟。
[0102]407:從腳本文件中讀出調整后的圖片的待渲染數據；
[0103]由于預先已將調整后的圖片的待渲染數據存儲在腳本文件中，因此，在確定需要重繪圖片時，可直接從腳本文件中讀出調整后的圖片的待渲染數據，而無需再向網絡側請求圖片的待渲染數據，也無需再對圖片的待渲染數據進行調整，進而節省因進行網絡交互而占用的資源，從而加快顯示圖片的速度。可采用數據讀取的方式從腳本文件中讀出調整后的圖片的待渲染數據的方式。
[0104]408:在創建的畫布中渲染讀出的調整后的圖片的待渲染數據，并在網頁中顯示圖片。
[0105]針對該步驟，在創建的畫布中渲染讀出的調整后的圖片的待渲染數據的方式與上述步驟406的方式相同，具體可參考上述步驟406中的內容，此處不再贅述。
[0106]本發明實施例提供的方法，通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度；
[0107]通過將調整后的圖片的待渲染數據存儲到腳本文件中，從而在重繪過程中，可以直接從腳本文件中讀出調整后的圖片的待渲染數據，并在創建的畫布中渲染讀出的調整后的圖片的待渲染數據，而無需再向網絡側發送加載圖片的HTTP請求，也無需再對圖片的待渲染數據進行調整，進一步減少了資源的占用，加快了顯示圖片的速度。
[0108]實施例四
[0109]參見圖5，本發明實施例提供了一種網頁中的圖片顯示裝置，該裝置包括:
[0110]創建模塊501，用于在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；[0111]獲取模塊502，用于獲取圖片的待渲染數據；
[0112]調整模塊503，用于根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0113]渲染模塊504，用于在創建的畫布中渲染調整后的圖片的待渲染數據；
[0114]顯示模塊505，用于在網頁中顯示圖片。
[0115]作為一種優選實施例，創建模塊501，用于在加載所述網頁時，在圖片的顯示區域使用canvas參數創建與顯示區域大小相同的畫布。
[0116]作為一種優選實施例,參見圖6,獲取模塊502,包括:
[0117]發送單元5021，使用圖像接口向網絡側發送加載圖片的HTTP請求，HTTP請求中攜帶圖片對應的URL ；
[0118]接收單元5022，用于接收網絡側根據HTTP請求返回的圖片的待渲染數據。
[0119]作為一種優選實施例，參見圖7，該終端還包括:
[0120]存儲模塊506，用于將獲取到的圖片的待渲染數據存儲到腳本文件中；
[0121]渲染模塊504，還用于從腳本文件中讀出圖片的待渲染數據，并根據屏幕分辨率調整讀出的圖片的待渲染數據，在創建的畫布中渲染所述調整后的圖片的待渲染數據。
[0122]作為一種優選實施例，調整模塊503，用于根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的所述圖片的待渲染數據。
[0123]綜上，本發明實施例提供的終端，通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度。
[0124]另外，通過將獲取到的圖片的待渲染數據存儲在腳本文件中，從而在重繪過程中，可以直接從腳本文件中讀出獲取到的圖片的待渲染數據，并對讀出的圖片的待渲染數據進行調整后，在顯示的畫布中渲染調整后的圖片的待渲染數據，而無需再向網絡側發送加載圖片的HTTP請求，進一步減少了資源的占用，加快了顯示圖片的速度。
[0125]實施例五
[0126]圖8是本發明實施例提供的一種終端結構示意圖。參見圖8，該終端可以用于實施上述實施例中提供的基于手勢操作的會話處理方法。其中，該終端可以為手機、平板電腦pad、穿戴式移動設備(如智能手表)等。優先的:
[0127]終端700可以包括通信單元110、包括有一個或一個以上計算機可讀存儲介質的存儲器120、輸入單元130、顯示單元140、傳感器150、音頻電路160、WiFi (wirelessfidelity，無線保真)模塊170、包括有一個或者一個以上處理核心的處理器180、以及電源190等部件。本領域技術人員可以理解，圖8中示出的終端設備結構并不構成對終端設備的限定，可以包括比圖示更多或更少的部件，或者組合某些部件，或者不同的部件布置。其中:
[0128]通信單元110可用于收發信息或通話過程中，信號的接收和發送，該通信單元110可以為RF (Radio Frequency，射頻)電路、路由器、調制解調器、等網絡通信設備。特別地，當通信單元110為RF電路時，將基站的下行信息接收后，交由一個或者一個以上處理器180處理；另外，將涉及上行的數據發送給基站。通常，作為通信單元的RF電路包括但不限于天線、至少一個放大器、調諧器、一個或多個振蕩器、用戶身份模塊(SIM)卡、收發信機、耦合器、LNA(Low Noise Amplifier,低噪聲放大器)、雙工器等。此外,通信單元110還可以通過無線通信與網絡和其他設備通信。所述無線通信可以使用任一通信標準或協議，包括但不限于 GSM(Global System of Mobile communication,全球移動通訊系統)、GPRS (GeneralPacket Radio Service,通用分組無線服務)、CDMA (Code Division Multiple Access,石馬分多址)、WCDMA(Wideband Code Division Multiple Access,寬帶碼分多址)、LTE(LongTerm Evolution,長期演進)、電子郵件、SMS (Short Messaging Service,短消息服務)等。存儲器120可用于存儲軟件程序以及模塊，處理器180通過運行存儲在存儲器120的軟件程序以及模塊，從而執行各種功能應用以及數據處理。存儲器120可主要包括存儲程序區和存儲數據區，其中，存儲程序區可存儲操作系統、至少一個功能所需的應用程序(比如聲音播放功能、圖像播放功能等)等；存儲數據區可存儲根據終端設備700的使用所創建的數據(比如音頻數據、電話本等)等。此外，存儲器120可以包括高速隨機存取存儲器，還可以包括非易失性存儲器，例如至少一個磁盤存儲器件、閃存器件、或其他易失性固態存儲器件。相應地，存儲器120還可以包括存儲器控制器，以提供處理器180和輸入單元130對存儲器120的訪問。
[0129]輸入單元130可用于接收輸入的數字或字符信息，以及產生與用戶設置以及功能控制有關的鍵盤、鼠標、操作桿、光學或者軌跡球信號輸入。優選地，輸入單元130可包括觸敏表面131以及其他輸入設備132。觸敏表面131，也稱為觸摸顯示屏或者觸控板，可收集用戶在其上或附近的觸摸操作(比如用戶使用手指、觸筆等任何適合的物體或附件在觸敏表面131上或在觸敏表面131附近的操作)，并根據預先設定的程式驅動相應的連接裝置。可選的，觸敏表面131可包括觸摸檢測裝置和觸摸控制器兩個部分。其中，觸摸檢測裝置檢測用戶的觸摸方位，并檢測觸摸操作帶來的信號，將信號傳送給觸摸控制器；觸摸控制器從觸摸檢測裝置上接收觸摸信息，并將它轉換成觸點坐標，再送給處理器180，并能接收處理器180發來的命令并加以執行。此外，可以采用電阻式、電容式、紅外線以及表面聲波等多種類型實現觸敏表面131。除了觸敏表面131，輸入單元130還可以包括其他輸入設備132。優選地，其他輸入設備132可以包括但不限于物理鍵盤、功能鍵(比如音量控制按鍵、開關按鍵等)、軌跡球、鼠標、操作桿等中的一種或多種。
[0130]顯示單元140可用于顯示由用戶輸入的信息或提供給用戶的信息以及終端700的各種圖形用戶接口，這些圖形用戶接口可以由圖形、文本、圖標、視頻和其任意組合來構成。顯示單元140可包括顯示面板141,可選的,可以采用LCD(Liquid Crystal Display,液晶顯示器)、OLED (Organic Light-Emitting Diode,有機發光二極管)等形式來配置顯示面板141。進一步的,觸敏表面131可覆蓋顯示面板141，當觸敏表面131檢測到在其上或附近的觸摸操作后，傳送給處理器180以確定觸摸事件的類型，隨后處理器180根據觸摸事件的類型在顯示面板141上提供相應的視覺輸出。雖然在圖8中，觸敏表面131與顯示面板141是作為兩個獨立的部件來實現輸入和輸入功能,但是在某些實施例中，可以將觸敏表面131與顯示面板141集成而實現輸入和輸出功能。
[0131]終端700還可包括至少一種傳感器150，比如光傳感器、運動傳感器以及其他傳感器。優選地，光傳感器可包括環境光傳感器及接近傳感器，其中，環境光傳感器可根據環境光線的明暗來調節顯示面板141的亮度，接近傳感器可在終端700移動到耳邊時，關閉顯示面板141和/或背光。作為運動傳感器的一種，重力加速度傳感器可檢測各個方向上(一般為三軸)加速度的大小，靜止時可檢測出重力的大小及方向，可用于識別手機姿態的應用(比如橫豎屏切換、相關游戲、磁力計姿態校準)、振動識別相關功能(比如計步器、敲擊)等；至于終端700還可配置的陀螺儀、氣壓計、濕度計、溫度計、紅外線傳感器等其他傳感器，在此不再贅述。
[0132]音頻電路160、揚聲器161，傳聲器162可提供用戶與終端700之間的音頻接口。音頻電路160可將接收到的音頻數據轉換后的電信號,傳輸到揚聲器161,由揚聲器161轉換為聲音信號輸出；另一方面，傳聲器162將收集的聲音信號轉換為電信號，由音頻電路160接收后轉換為音頻數據，再將音頻數據輸出處理器180處理后，經RF電路110以發送給比如另一終端設備，或者將音頻數據輸出至存儲器120以便進一步處理。音頻電路160還可能包括耳塞插孔，以提供外設耳機與終端設備700的通信。
[0133]為了實現無線通信，該終端設備上可以配置有無線通信單元170，該無線通信單元170可以為WiFi模塊。WiFi屬于短距離無線傳輸技術，終端700通過無線通信單元170可以幫助用戶收發電子郵件、瀏覽網頁和訪問流式媒體等，它為用戶提供了無線的寬帶互聯網訪問。雖然圖8示出了無線通信單元170，但是可以理解的是，其并不屬于終端700的必須構成，完全可以根據需要在不改變發明的本質的范圍內而省略。
[0134]處理器180是終端700的控制中心，利用各種接口和線路連接整個手機的各個部分，通過運行或執行存儲在存儲器120內的軟件程序和/或模塊，以及調用存儲在存儲器120內的數據，執行終端700的各種功能和處理數據，從而對手機進行整體監控。可選的，處理器180可包括一個或多個處理核心；優選的，處理器180可集成應用處理器和調制解調處理器，其中，應用處理器主要處理操作系統、用戶界面和應用程序等，調制解調處理器主要處理無線通信。可以理解的是，上述調制解調處理器也可以不集成到處理器180中。
[0135]終端700還包括給各個部件供電的電源190 (比如電池)，優選的，電源可以通過電源管理系統與處理器180邏輯相連，從而通過電源管理系統實現管理充電、放電、以及功耗管理等功能。電源190還可以包括一個或一個以上的直流或交流電源、再充電系統、電源故障檢測電路、電源轉換器或者逆變器、電源狀態指示器等任意組件。
[0136]盡管未示出，終端700還可以包括攝像頭、藍牙模塊等，在此不再贅述。具體在本實施例中，終端設備的顯示單元是觸摸屏顯示器，該終端包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲于存儲器中，且經配置以由一個或者一個以上處理器執行所述一個或者一個以上程序包含用于進行以下操作的指令:
[0137]在網頁中的圖片的顯示區域創建與顯示區域大小相同的畫布；
[0138]獲取圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據；
[0139]在創建的畫布中渲染調整后的圖片的待渲染數據，在網頁中顯示圖片。
[0140]可選地，存儲器還包括進行以下操作的指令:在加載網頁時，在圖片的顯示區域使用canvas參數創建與所述顯示區域大小相同的畫布。
[0141]可選地，存儲器還包括進行以下操作的指令:獲取圖片的待渲染數據，包括:使用圖像接口向網絡側發送加載所述圖片的超文本傳輸協議HTTP請求，HTTP請求中攜帶圖片對應的統一資源定位符URL ;接收網絡側根據HTTP請求返回的圖片的待渲染數據。[0142]可選地，存儲器還包括進行以下操作的指令:獲取所述圖片的待渲染數據之后，還包括:將獲取到的圖片的待渲染數據存儲到腳本文件中；在創建的畫布中渲染調整后的圖片的待渲染數據，包括:從腳本文件中讀出圖片的待渲染數據，并根據屏幕分辨率調整讀出的圖片的待渲染數據，在創建的畫布中渲染調整后的圖片的待渲染數據。
[0143]可選地，存儲器還包括進行以下操作的指令:根據屏幕分辨率調整獲取到的圖片的待渲染數據，包括:根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的圖片的待渲染數據。
[0144]綜上，本發明實施例提供的網頁中的終端，通過在網頁中的圖片的顯示區域創建與該顯示區域大小相同的畫布，并在獲取圖片的待渲染數據后，根據屏幕分辨率調整獲取到的圖片的待渲染數據；之后在創建的畫布中渲染調整后的圖片的待渲染數據，并在網頁中顯示圖片，從而可根據屏幕分辨率適應性調整在創建的畫布中渲染的圖片的待渲染數據的大小，對于屏幕分辨率比較低的顯示設備而言，其占用的資源較少，因而可加快顯示圖片的速度。
[0145]需要說明的是:上述實施例提供的網頁中的圖片顯示終端在顯示網頁中的圖片時，僅以上述各功能模塊的劃分進行舉例說明，實際應用中，可以根據需要而將上述功能分配由不同的功能模塊完成，即將終端的內部結構劃分成不同的功能模塊，以完成以上描述的全部或者部分功能。另外，上述實施例提供的網頁中的圖片顯示終端與網頁中的圖片顯示方法實施例屬于同一構思，其具體實現過程詳見方法實施例，這里不再贅述。
[0146]上述本發明實施例序號僅僅為了描述，不代表實施例的優劣。
[0147]本領域普通技術人員可以理解實現上述實施例的全部或部分步驟可以通過硬件來完成，也可以通過程序來指令相關的硬件完成，所述的程序可以存儲于一種計算機可讀存儲介質中，上述提到的存儲介質可以是只讀存儲器，磁盤或光盤等。
[0148]以上所述僅為本發明的較佳實施例，并不用以限制本發明，凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護范圍之內。
【權利要求】
1.一種網頁中的圖片顯示方法，其特征在于，所述方法包括: 在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布； 獲取所述圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據； 在創建的畫布中渲染調整后的所述圖片的待渲染數據，在所述網頁中顯示所述圖片。
2.根據權利要求1所述的方法，其特征在于，所述在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布，包括: 在加載所述網頁時，在所述圖片的顯示區域使用canvas參數創建與所述顯示區域大小相同的畫布。
3.根據權利要求1所述的方法，其特征在于，所述獲取所述圖片的待渲染數據，包括: 使用圖像接口向網絡側發送加載所述圖片的超文本傳輸協議HTTP請求，所述HTTP請求中攜帶所述圖片對應的統一資源定位符URL ； 接收所述網絡側根據所述HTTP請求返回的所述圖片的待渲染數據。
4.根據權利要求1至3中任一權利要求所述的方法，其特征在于，所述獲取所述圖片的待渲染數據之后，還包括: 將所述獲取到的圖片的待渲染數據存儲到腳本文件中； 所述在創建的畫布中渲染調整后的所述圖片的待渲染數據，包括: 從所述腳本文件中讀出所述圖片的待渲染數據，并根據屏幕分辨率調整所述讀出的圖片的待渲染數據，在創建的畫布中渲染所述調整后的圖片的待渲染數據。
5.根據權利要求1所述的方法，其特征在于，所述根據屏幕分辨率調整獲取到的圖片的待渲染數據，包括: 根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的所述圖片的待渲染數據。
6.一種網頁中的圖片顯示裝置，其特征在于，所述裝置包括: 創建模塊，用于在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布； 獲取模塊，用于獲取所述圖片的待渲染數據； 調整模塊，用于根據屏幕分辨率調整獲取到的圖片的待渲染數據； 渲染模塊，用于在創建的畫布中渲染調整后的所述圖片的待渲染數據； 顯示模塊，用于在網頁中顯示所述圖片。
7.根據權利要求6所述的裝置，其特征在于，所述創建模塊，用于在加載所述網頁時，在所述圖片的顯示區域使用canvas參數創建與所述顯示區域大小相同的畫布。
8.根據權利要求6所述的裝置，其特征在于，所述獲取模塊，包括: 發送單元，用于使用圖像接口向網絡側發送加載所述圖片的HTTP請求，所述HTTP請求中攜帶所述圖片對應的統一資源定位符URL ； 接收單元，用于接收所述網絡側根據所述HTTP請求返回的所述圖片的待渲染數據。
9.根據權利要求6至8中任一權利要求所述的裝置，其特征在于，所裝置還包括: 存儲模塊，用于將所述獲取到的圖片的待渲染數據存儲到腳本文件中； 所述渲染模塊，用于從所述腳本文件中讀出所述圖片的待渲染數據，并根據屏幕分辨率調整所述讀出的圖片的待渲染數據，在創建的畫布中渲染所述調整后的圖片的待渲染數據。
10.根據權利要求6所述的裝置，其特征在于，所述調整模塊，用于根據屏幕分辨率調整獲取到的圖片的分辨率，得到分辨率調整后的圖片的待渲染數據，并將分辨率調整后的圖片的待渲染數據作為調整后的所述圖片的待渲染數據。
11.一種終端，其特征在于，所述終端包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲于存儲器中，且經配置以由一個或者一個以上處理器執行所述一個或者一個以上程序包含用于進行以下操作的指令: 在網頁中的圖片的顯示區域創建與所述顯示區域大小相同的畫布； 獲取所述圖片的待渲染數據，并根據屏幕分辨率調整獲取到的圖片的待渲染數據； 在創建的畫布中渲染調 整后的所述圖片的待渲染數據，在所述網頁中顯示所述圖片。
【文檔編號】G06F17/30GK103455571SQ201310362329
【公開日】2013年12月18日 申請日期:2013年8月19日 優先權日:2013年8月19日
【發明者】任遠, 姚麗梅, 王宗妮 申請人:小米科技有限責任公司