專利名稱：網(wǎng)頁圖像展示方法和系統(tǒng)的制作方法
網(wǎng)頁圖像展示方法和系統(tǒng)
技術(shù)領(lǐng)域：
本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)，尤其涉及一種網(wǎng)頁圖像展示方法和系統(tǒng)。
背景技術(shù)：
瀏覽器打開圖像通常需要一個網(wǎng)頁地址(URL)，通過URL獲取服務(wù)器上的圖片文件，也可獲取本地存儲的圖片文件。當(dāng)需要通過網(wǎng)頁展現(xiàn)實時捕獲的截圖或用戶使用工具編輯過的圖像時，傳統(tǒng)的做法通常是將圖像數(shù)據(jù)轉(zhuǎn)換為二進制形式的圖片文件，并將二進制形式的圖片文件傳輸?shù)椒?wù)器或存儲在本地，然后通過瀏覽器獲取二進制形式的圖片文件并還原為圖像。由于網(wǎng)頁中的腳本程序不支持二進制數(shù)據(jù)類型，傳統(tǒng)的這種網(wǎng)頁圖像展示方法，瀏覽器將圖像以二進制形式下載下來后，需轉(zhuǎn)換成一個網(wǎng)頁中的對象，且由于下載過程不可控，若在下載過程需干預(yù)瀏覽器默認(rèn)的展示過程(例如需重新設(shè)置圖片的長寬或者使圖片淡入淡出)，則在下載過程中需先創(chuàng)建一個不可見的圖片對象，等待對象下載完成后再進行展示，實現(xiàn)起來比較復(fù)雜。且由于需將圖像數(shù)據(jù)以二進制形式傳輸?shù)椒?wù)器或存儲在本地，因此增加了網(wǎng)絡(luò)和磁盤讀寫的開銷，從而也增加了處理成本和響應(yīng)時間。

發(fā)明內(nèi)容基于此，有必要提供一種能減少處理成本和響應(yīng)時間的網(wǎng)頁圖像展示方法。一種網(wǎng)頁圖像展示方法，包括以下步驟:獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)；將所述字符串 數(shù)據(jù)傳輸給瀏覽器；通過瀏覽器將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。此外，還有必要提供一種能減少處理成本和響應(yīng)時間的網(wǎng)頁圖像展示系統(tǒng)?！N網(wǎng)頁圖像展示系統(tǒng)，包括:第三方應(yīng)用，用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)，以及將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器；瀏覽器，用于將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。上述網(wǎng)頁圖像展示方法和系統(tǒng)，通過將圖像數(shù)據(jù)轉(zhuǎn)換為網(wǎng)頁中的腳本程序支持的字符串?dāng)?shù)據(jù)，使得圖像不需要上傳到服務(wù)器或存儲到本地，就能直接傳輸給瀏覽器并通過瀏覽器進行展示，減少了網(wǎng)絡(luò)及磁盤讀寫的開銷，從而減少了處理成本和響應(yīng)時間。

圖1為本發(fā)明網(wǎng)頁圖像展示方法的原理圖。圖2為一個實施例中網(wǎng)頁圖像展示方法的流程示意圖；圖3為圖2中步驟S102的流程示意圖；圖4為圖2中步驟S106的流程示意圖；圖5為一個實施例中網(wǎng)頁圖像展示系統(tǒng)的結(jié)構(gòu)示意圖；圖6為一個實施例中第三方應(yīng)用的內(nèi)部示意圖。
具體實施方式如圖1所示，本發(fā)明通過對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)，將字符串?dāng)?shù)據(jù)傳輸給瀏覽器，再通過瀏覽器將字符串?dāng)?shù)據(jù)還原為圖像并在網(wǎng)頁中展示。由于網(wǎng)頁的腳本程序支持字符串?dāng)?shù)據(jù)，圖像不需要再以二進制文件形式傳輸?shù)椒?wù)器或存儲在本地，因此能減少網(wǎng)絡(luò)和磁盤讀寫開銷，從而減少了處理成本和響應(yīng)時間。在一個實施例中，如圖2所示，一種網(wǎng)頁圖像展示方法，包括以下步驟:步驟S102，獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)。如圖3所示，在一個實施例中，步驟S102的具體過程為:步驟S112，獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行編碼，得到編碼后的字符串圖像數(shù)據(jù)。具體的，可采用標(biāo)準(zhǔn)的URL編碼規(guī)則對圖像數(shù)據(jù)進行編碼。優(yōu)選的，還可采用標(biāo)準(zhǔn)的base64編碼規(guī)則對圖像數(shù)據(jù)進行編碼。由于base64編碼壓縮率高，因此通過base64編碼后的得到的字符串圖像數(shù)據(jù)很短，數(shù)據(jù)傳輸量小。步驟S122，將編碼后的字符串圖像數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。在一個實施例中，該數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)包括:協(xié)議名稱、圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。具體的，可按照數(shù)據(jù)URI (即Data URI，一種數(shù)據(jù)描述協(xié)議)的格式進行轉(zhuǎn)換。例如，圖片文件對應(yīng)的數(shù)據(jù)URI的格式為:data: [〈mime type〉][ ；base64],〈encoded data〉其中，data為協(xié)議名稱,〈mime type〉表示圖像的文件類型(例如jpg格式圖片文件對應(yīng)“image/jpeg”), [ ；base6`4]表不使用了 base64 編碼，〈encoded data〉為編碼后的字符串圖像數(shù)據(jù)。對某一個圖像進行base64編碼后得到的字符串圖像數(shù)據(jù)為:iVBORwOKGgoAAAANSUhEUgAAAFgAAABLCAYAAADOlOABAAAABHNCSVQICAglfAhkiAAAAAlwSFlzAAALEgAACxIB0tl+/AAAABZ0RVh0Q3JlYX.......
則根據(jù)上述數(shù)據(jù)URI的格式將該base64編碼后得到的字符串圖像數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)為:data:image/png ；base64, iVBORwOKGgoAAAANSUhEUgAAAFgAAABLCAYAAADO10ABAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIBOtl+/AA.......
步驟S104，將字符串?dāng)?shù)據(jù)傳輸給瀏覽器。在一個實施例中，可通過瀏覽器擴展接口將上述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)傳輸給瀏覽器。瀏覽器擴展接口是第三方應(yīng)用在瀏覽器上增加的、可供網(wǎng)頁調(diào)用從而實現(xiàn)網(wǎng)頁與第三方應(yīng)用交互或交換數(shù)據(jù)的非標(biāo)準(zhǔn)接口。第三方應(yīng)用可以是各種瀏覽器的控件、插件以及擴展了功能的瀏覽器等。通過瀏覽器擴展接口，第三方應(yīng)用可獲取圖像數(shù)據(jù)，將對圖像數(shù)據(jù)處理后得到的字符串?dāng)?shù)據(jù)傳輸?shù)綖g覽器。步驟S106，通過瀏覽器將字符串?dāng)?shù)據(jù)還原為圖像并展示。如圖4所示，在一個實施例中，步驟S106的具體過程為:步驟S116，通過瀏覽器接收數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。具體的，瀏覽器可通過瀏覽器擴展接口接收數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。步驟S126，根據(jù)數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)將編碼后的字符串圖像數(shù)據(jù)還原為圖像并展示。具體的，如上所述，數(shù)據(jù)URI形式的字符串可包括圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。對于一些標(biāo)準(zhǔn)的瀏覽器，可直接將數(shù)據(jù)URI形式的字符串代替?zhèn)鹘y(tǒng)的URL，將該數(shù)據(jù)URI形式的字符串賦值給一個圖片對象，然后瀏覽器根據(jù)數(shù)據(jù)URI形式的字符串的內(nèi)容，將編碼后的字符串圖像數(shù)據(jù)還原為圖像，并按照圖像的文件類型將圖像展示在網(wǎng)頁中。對于其他一些非標(biāo)準(zhǔn)的瀏覽器，也可支持展示采用數(shù)據(jù)URI描述的圖像。在一個實施例中，如圖5所不,一種網(wǎng)頁圖像展不系統(tǒng),包括多個第三方應(yīng)用10和與第三方應(yīng)用進行交互的瀏覽器20，其中:第三方應(yīng)用10用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)，以及將字符串?dāng)?shù)據(jù)傳輸給瀏覽器20。瀏覽器20用于將字符串?dāng)?shù)據(jù)還原為圖像并展示。具體的，第三方應(yīng)用10可以是各種瀏覽器的控件、插件以及擴展了功能的瀏覽器等，第三方應(yīng)用10可在瀏覽器20上增加瀏覽器擴展接口，通過瀏覽器擴展接口與瀏覽器20進行交互或交換數(shù)據(jù)。在一個實施例中，第三方應(yīng)用10還用于通過瀏覽器擴展接口將字符串?dāng)?shù)據(jù)傳輸給瀏覽器20。進一步的，在一個實施例中，如圖6所示，第三方應(yīng)用10包括編碼模塊110和數(shù)據(jù)轉(zhuǎn)換模塊120，其中:編碼模塊110用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行編碼，得到編碼后的字符串圖像數(shù)據(jù)。具體的，編碼模塊10可采用標(biāo)準(zhǔn)的URL編碼規(guī)則對圖像數(shù)據(jù)進行編碼。優(yōu)選的，還可采用標(biāo)準(zhǔn)的base64編碼規(guī)則對圖像數(shù)據(jù)進行編碼。由于base64編碼壓縮率高，因此通過base64編碼后的得到的字符串圖像數(shù)據(jù)很短，數(shù)據(jù)傳輸量小。數(shù)據(jù)轉(zhuǎn)換模塊120用于將編碼后的字符串?dāng)?shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。在一個實施例中，該數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)包括:協(xié)議名稱、圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。具體的，可按照數(shù)據(jù)URI (即Data URI，一種數(shù)據(jù)描述協(xié)議)的格式進行轉(zhuǎn)換。在一個實施例中，瀏覽器20還用于接收數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)，根據(jù)數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)將編碼后的字符串圖像數(shù)據(jù)還原為圖像并展示。具體的，如上所述，數(shù)據(jù)URI形式的字符串可包括圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。對于一些瀏覽器，可直接將數(shù)據(jù)URI形式的字符串代替?zhèn)鹘y(tǒng)的URL，將該數(shù)據(jù)URI形式的字符串賦值給一個圖片對象，然后瀏覽器根據(jù)數(shù)據(jù)URI形式的字符串的內(nèi)容，將編碼后的字符串圖像數(shù)據(jù)還原為圖像，并按照圖像的文件類型將圖像展示在網(wǎng)頁中。對于其他一些非標(biāo)準(zhǔn)的瀏覽器，也可支持展示采用數(shù)據(jù)URI描述的圖像。上述網(wǎng)頁圖像展示方法和系統(tǒng)，除了能減少處理成本和響應(yīng)時間外，由于不需要將圖像上傳到服務(wù)器或本地，減少了網(wǎng)絡(luò)傳輸和磁盤的讀寫次數(shù)，因此也能減少異常出現(xiàn)的次數(shù)。由于第三方應(yīng)用可通過瀏覽器擴展接口直接將字符串?dāng)?shù)據(jù)傳輸給瀏覽器，因此實現(xiàn)起來簡單有效。以上所述實施例僅表達了本發(fā)明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進，這些都屬于本發(fā)明的保護范圍。因此，本發(fā)明專利的保護范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
權(quán)利要求
1.一種網(wǎng)頁圖像展示方法，包括以下步驟: 獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)； 將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器； 通過瀏覽器將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。
2.根據(jù)權(quán)利要求1所述的網(wǎng)頁圖像展示方法，其特征在于，所述獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)的步驟包括: 獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行編碼，得到編碼后的字符串圖像數(shù)據(jù)； 將所述編碼后的字符串圖像數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。
3.根據(jù)權(quán)利要求2所述的網(wǎng)頁圖像展示方法，其特征在于，所述通過瀏覽器將所述字符串?dāng)?shù)據(jù)還原為圖像并展示的步驟包括: 通過瀏覽器接收所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)； 根據(jù)所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)將編碼后的字符串圖像數(shù)據(jù)還原為圖像并展示。
4.根據(jù)權(quán)利要求3所述的網(wǎng)頁圖像展示方法，其特征在于，所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)包括:圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。
5.根據(jù)權(quán)利要求1至4任一項所述的網(wǎng)頁圖像展示方法，其特征在于，所述將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器的步驟為: 通過瀏覽器擴展接口將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器。
6.一種網(wǎng)頁圖像展示系統(tǒng)，其特征在于，包括: 第三方應(yīng)用，用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)，以及將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器； 瀏覽器，用于將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。
7.根據(jù)權(quán)利要求6所述的網(wǎng)頁圖像展示系統(tǒng)，其特征在于，所述第三方應(yīng)用包括: 編碼模塊，用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行編碼，得到編碼后的字符串圖像數(shù)據(jù)； 數(shù)據(jù)轉(zhuǎn)換模塊，用于將所述編碼后的字符串圖像數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)。
8.根據(jù)權(quán)利要求7所述的網(wǎng)頁圖像展示系統(tǒng)，其特征在于，所述瀏覽器還用于接收所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)，根據(jù)所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)將編碼后的字符串圖像數(shù)據(jù)還原為圖像并展示。
9.根據(jù)權(quán)利要求8所述的網(wǎng)頁圖像展示系統(tǒng)，其特征在于，所述數(shù)據(jù)URI形式的字符串?dāng)?shù)據(jù)包括:圖像的文件類型、編碼方式和編碼后的字符串圖像數(shù)據(jù)。
10.根據(jù)權(quán)利要求6至9任一項所述的網(wǎng)頁圖像展示系統(tǒng)，其特征在于，所述第三方應(yīng)用還用于通過瀏覽器擴展接口將所述字符串?dāng)?shù)據(jù)傳輸給所述瀏覽器。
全文摘要
本發(fā)明提供了一種網(wǎng)頁圖像展示方法和系統(tǒng)，所述方法包括獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)；將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器；通過瀏覽器將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。所述系統(tǒng)包括第三方應(yīng)用，用于獲取圖像數(shù)據(jù)，對圖像數(shù)據(jù)進行處理得到字符串?dāng)?shù)據(jù)，以及將所述字符串?dāng)?shù)據(jù)傳輸給瀏覽器；瀏覽器，用于將所述字符串?dāng)?shù)據(jù)還原為圖像并展示。采用本發(fā)明，能減少處理成本和響應(yīng)時間。
文檔編號G06F17/30GK103177015SQ20111043582
公開日2013年6月26日 申請日期2011年12月22日 優(yōu)先權(quán)日2011年12月22日
發(fā)明者于濤 申請人:騰訊科技(深圳)有限公司