[發(fā)明專利]圖片傳輸方法、系統(tǒng)和裝置

有效

• 申請?zhí)枺?/td>: 201310102733.1
• 申請日: 2013-03-27
• 公開（公告）號: CN103200251A
• 公開（公告）日: 2013-07-10
• 發(fā)明（設(shè)計）人: 劉禹彤
• 申請（專利權(quán)）人: 百度在線網(wǎng)絡(luò)技術(shù)（北京）有限公司
• 主分類號: H04L29/08
• 分類號: H04L29/08
• 代理公司: 北京清亦華知識產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11201
• 代理人: 宋合成

技術(shù)領(lǐng)域

本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種圖片傳輸方法、系統(tǒng)和裝置。

背景技術(shù)

隨著互聯(lián)網(wǎng)和移動終端的發(fā)展，越來越多的用戶使用移動終端訪問互聯(lián)網(wǎng)。而目前由于網(wǎng)絡(luò)流量和網(wǎng)絡(luò)速度的限制，很多時候移動終端并不加載圖片。例如目前在手機(jī)瀏覽器的無圖模式下，瀏覽器對于圖片采取了全部的禁用的方式，使得網(wǎng)頁中的所有圖片都無法顯示。然而無圖模式的目標(biāo)是節(jié)省流量，一些必要圖片，例如圖標(biāo)、標(biāo)識、和藝術(shù)字等，圖片本身的數(shù)據(jù)量不大，如果不進(jìn)行顯示，則會影響用戶體驗。

如圖1a與圖1b分別為網(wǎng)站首頁無圖模式和有圖模式下的界面示意圖。在對比得出，圖1a中的無圖模式下，網(wǎng)站標(biāo)識、百度一下按鈕和向下箭頭都被屏蔽，破壞了界面風(fēng)格，影響了界面的美觀性，造成用戶體驗不佳。

隨著移動端的普及、移動終端的開發(fā)越來越豐富和深入，網(wǎng)站頁面的個性化不斷加深，功能日趨復(fù)雜，指導(dǎo)圖片也越來越多。目前對于比較簡單的圖片，可以為之編寫特定的HTML及CSS3代碼來進(jìn)行顯示，但是每段響應(yīng)編寫的代碼能適應(yīng)于特定圖片，開發(fā)過程比較復(fù)雜，通用性差。因此，如何在不大幅增加傳輸數(shù)據(jù)量的情況下傳輸圖片成為了亟待解決的問題。

發(fā)明內(nèi)容

本發(fā)明旨在至少解決現(xiàn)有技術(shù)中存在的技術(shù)問題之一。為此，本發(fā)明的一個目的在于提出一種圖片傳輸方法。本方法節(jié)省流量，通過顯示圖片保持了界面的完整和美觀，改善了用戶體驗，實施簡單，通用性好。

本發(fā)明的第二個目的在于提出一種圖片傳輸系統(tǒng)。

本發(fā)明的第三個目的在于提出一種服務(wù)器。

本發(fā)明的第四個目的在于提出一種瀏覽器。

為達(dá)到上述目的，本發(fā)明第一方面的實施例提出了一種圖片傳輸方法，包括以下步驟：服務(wù)器對圖片進(jìn)行編碼以生成二進(jìn)制圖片文件；所述服務(wù)器根據(jù)客戶端的請求消息將所述二進(jìn)制圖片文件通過響應(yīng)消息發(fā)送至客戶端，并在所述在響應(yīng)消息中添加標(biāo)識信息；所述客戶端根據(jù)所述標(biāo)識信息調(diào)用解碼API接口對所述二進(jìn)制圖片文件進(jìn)行解碼；所述客戶端調(diào)用圖片顯示API接口將解碼之后的圖片進(jìn)行顯示。

根據(jù)本發(fā)明實施例的圖片傳輸方法將圖片文件進(jìn)行編碼傳輸，節(jié)省流量的同時客戶端可以對圖片進(jìn)行顯示。在無圖模式下保留了需要顯示的標(biāo)識、功能圖片和導(dǎo)航等圖片。保持了界面的完整和美觀，改善了用戶體驗，并且實施簡單，通用性好。

在本發(fā)明的一個實施例中，所述客戶端通過瀏覽器調(diào)用所述解碼API接口和圖片顯示API接口。

在本發(fā)明的一個實施例中，所述瀏覽器支持HTML5及以上版本，且所述服務(wù)器通過XMLHttpRequest響應(yīng)消息將所述二進(jìn)制圖片文件發(fā)送至所述瀏覽器。

在本發(fā)明的一個實施例中，所述解碼API接口為TypedArray接口。

在本發(fā)明的一個實施例中，所述圖片顯示API接口為Canvas?API接口。

在本發(fā)明的一個實施例中，所述二進(jìn)制圖片文件為移植網(wǎng)絡(luò)圖形PNG格式。

本發(fā)明第二方面的實施例提出了一種圖片傳輸系統(tǒng)，包括服務(wù)器和客戶端。其中，所述服務(wù)器用于對圖片進(jìn)行編碼以生成二進(jìn)制圖片文件，并根據(jù)所述客戶端的請求消息將所述二進(jìn)制圖片文件通過響應(yīng)消息發(fā)送至客戶端，以及在所述在響應(yīng)消息中添加標(biāo)識信息；所述客戶端用于根據(jù)所述標(biāo)識信息調(diào)用解碼API接口對所述二進(jìn)制圖片文件進(jìn)行解碼，并調(diào)用圖片顯示API接口將解碼之后的圖片進(jìn)行顯示。

根據(jù)本發(fā)明實施例的圖片傳輸系統(tǒng)將圖片文件進(jìn)行編碼傳輸，節(jié)省流量的同時客戶端可以對圖片進(jìn)行顯示。在無圖模式下保留了需要顯示的標(biāo)識、功能圖片和導(dǎo)航等圖片。保持了界面的完整和美觀，改善了用戶體驗，并且實施簡單，通用性好。

在本發(fā)明的一個實施例中，所述客戶端通過瀏覽器調(diào)用所述解碼API接口和圖片顯示API接口。

在本發(fā)明的一個實施例中，所述瀏覽器支持HTML5及以上版本，且所述服務(wù)器通過XMLHttpRequest響應(yīng)消息將所述二進(jìn)制圖片文件發(fā)送至所述瀏覽器。

在本發(fā)明的一個實施例中，所述解碼API接口為TypedArray接口。

在本發(fā)明的一個實施例中，所述圖片顯示API接口為Canvas?API接口。

在本發(fā)明的一個實施例中，所述二進(jìn)制圖片文件為PNG格式。

本發(fā)明第三方面的實施例提出了一種服務(wù)器，包括編碼模塊和響應(yīng)模塊。其中，編碼模塊，用于對圖片進(jìn)行編碼以生成二進(jìn)制圖片文件；響應(yīng)模塊，用于根據(jù)客戶端的請求消息將所述二進(jìn)制圖片文件通過響應(yīng)消息發(fā)送至客戶端，以及在所述在響應(yīng)消息中添加標(biāo)識信息。