CN103200251B

CN103200251B - 图片传输方法、系统和装置

Info

Publication number: CN103200251B
Application number: CN201310102733.1A
Authority: CN
Inventors: 刘禹彤
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2013-03-27
Filing date: 2013-03-27
Publication date: 2016-12-28
Anticipated expiration: 2033-03-27
Also published as: CN103200251A

Abstract

本发明提出一种图片传输方法，包括以下步骤：服务器对图片进行编码以生成二进制图片文件；服务器根据客户端的请求消息将二进制图片文件通过响应消息发送至客户端，并在响应消息中添加标识信息；客户端根据标识信息调用解码API接口对二进制图片文件进行解码；客户端调用图片显示API接口将解码之后的图片进行显示。本发明节省流量，通过显示图片保持了界面的完整和美观，改善了用户体验，实施简单，通用性好。本发明还公开了一种图片传输系统、一种服务器和一种浏览器。

Description

图片传输方法、系统和装置

技术领域

本发明涉及互联网技术领域，特别涉及一种图片传输方法、系统和装置。

背景技术

随着互联网和移动终端的发展，越来越多的用户使用移动终端访问互联网。而目前由于网络流量和网络速度的限制，很多时候移动终端并不加载图片。例如目前在手机浏览器的无图模式下，浏览器对于图片采取了全部的禁用的方式，使得网页中的所有图片都无法显示。然而无图模式的目标是节省流量，一些必要图片，例如图标、标识、和艺术字等，图片本身的数据量不大，如果不进行显示，则会影响用户体验。

如图1a与图1b分别为网站首页无图模式和有图模式下的界面示意图。在对比得出，图1a中的无图模式下，网站标识、百度一下按钮和向下箭头都被屏蔽，破坏了界面风格，影响了界面的美观性，造成用户体验不佳。

随着移动端的普及、移动终端的开发越来越丰富和深入，网站页面的个性化不断加深，功能日趋复杂，指导图片也越来越多。目前对于比较简单的图片，可以为之编写特定的HTML及CSS3代码来进行显示，但是每段响应编写的代码能适应于特定图片，开发过程比较复杂，通用性差。因此，如何在不大幅增加传输数据量的情况下传输图片成为了亟待解决的问题。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。为此，本发明的一个目的在于提出一种图片传输方法。本方法节省流量，通过显示图片保持了界面的完整和美观，改善了用户体验，实施简单，通用性好。

本发明的第二个目的在于提出一种图片传输系统。

本发明的第三个目的在于提出一种服务器。

本发明的第四个目的在于提出一种浏览器。

为达到上述目的，本发明第一方面的实施例提出了一种图片传输方法，包括以下步骤：服务器对图片进行编码以生成二进制图片文件；所述服务器根据客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端，并在所述在响应消息中添加标识信息；所述客户端根据所述标识信息调用解码API接口对所述二进制图片文件进行解码；所述客户端调用图片显示API接口将解码之后的图片进行显示。

根据本发明实施例的图片传输方法将图片文件进行编码传输，节省流量的同时客户端可以对图片进行显示。在无图模式下保留了需要显示的标识、功能图片和导航等图片。保持了界面的完整和美观，改善了用户体验，并且实施简单，通用性好。

在本发明的一个实施例中，所述客户端通过浏览器调用所述解码API接口和图片显示API接口。

在本发明的一个实施例中，所述浏览器支持HTML5及以上版本，且所述服务器通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述浏览器。

在本发明的一个实施例中，所述解码API接口为TypedArray接口。

在本发明的一个实施例中，所述图片显示API接口为Canvas API接口。

在本发明的一个实施例中，所述二进制图片文件为移植网络图形PNG格式。

本发明第二方面的实施例提出了一种图片传输系统，包括服务器和客户端。其中，所述服务器用于对图片进行编码以生成二进制图片文件，并根据所述客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端，以及在所述在响应消息中添加标识信息；所述客户端用于根据所述标识信息调用解码API接口对所述二进制图片文件进行解码，并调用图片显示API接口将解码之后的图片进行显示。

根据本发明实施例的图片传输系统将图片文件进行编码传输，节省流量的同时客户端可以对图片进行显示。在无图模式下保留了需要显示的标识、功能图片和导航等图片。保持了界面的完整和美观，改善了用户体验，并且实施简单，通用性好。

在本发明的一个实施例中，所述解码API接口为TypedArray接口。

在本发明的一个实施例中，所述二进制图片文件为PNG格式。

本发明第三方面的实施例提出了一种服务器，包括编码模块和响应模块。其中，编码模块，用于对图片进行编码以生成二进制图片文件；响应模块，用于根据客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端，以及在所述在响应消息中添加标识信息。

根据本发明实施例的服务器对图片进行编码传输，节省了网络流量，同时使得客户端可以收到图片，以保证客户端用户界面的完整和美观，改善了用户体验，并且实施简单，通用性好。

在本发明的一个实施例中，所述响应模块通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述客户端。

在本发明的一个实施例中，所述二进制图片文件为PNG格式。

本发明第四方面的实施例提出了一种浏览器，包括接收模块、解码模块和显示模块。

其中，接收模块用于接收服务器发送的响应消息，所述响应消息中包括二进制图片文件及标识信息；解码模块用于根据所述标识信息调用解码API接口对所述二进制图片文件进行解码；显示模块用于调用图片显示API接口将解码之后的图片进行显示。

根据本发明实施例的浏览器将图片文件进行编码传输，节省流量的同时客户端可以对图片进行显示。在无图模式下保留了需要显示的标识、功能图片和导航等图片。保持了界面的完整和美观，改善了用户体验，并且实施简单，通用性好。

在本发明的一个实施例中，所述解码API接口为TypedArray接口。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1a是某网页无图模式下页面示意图；

图1b是某网页有图模式下页面示意；

图2是根据本发明实施例的图片传输方法的流程图；

图3是根据本发明实施例的图片传输系统的结构示意图；

图4是根据本发明实施例的服务器的结构示意图；和

图5是根据本发明实施例的浏览器的结构示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

下面参考图2描述根据本发明实施例的图片传输方法，包括以下步骤：

步骤S110：服务器对图片进行编码以生成二进制图片文件。

其中，二进制图片文件为移植网络图形PNG格式。

步骤S120：服务器根据客户端的请求消息将二进制图片文件通过响应消息发送至客户端，并在响应消息中添加标识信息。

在本发明的一个实施例中，浏览器支持HTML5及以上版本，且服务器通过XMLHttpRequest响应消息将二进制图片文件发送至浏览器。

步骤S130：客户端根据标识信息调用解码API接口对二进制图片文件进行解码。

步骤S140：客户端调用图片显示API接口将解码之后的图片进行显示。

其中，客户端通过浏览器调用解码API接口和图片显示API接口。

在本发明的一个实施例中，解码API接口为TypedArray接口。图片显示API接口为Canvas API接口。

下面以一个具体的实施例对本方法进行解释说明，可以理解的是，下面的说明仅出于示例目的，本发明的实施例不限于此。

步骤S210：服务器将图片编码为二进制图片文件。

在本发明的一个实施例中，选择编码方案需要考虑以下三个因素：

(一)、通用性好。对于适用特定方案的图片，编码的方案需要能够覆盖所有的图片类型来满足不同的需求。需求可以包括的方面有：无损、覆盖度高、颜色值和透明度，在不同方面的需求下，编码方案都能有良好的编码效果。

(二)、压缩比高。考虑到传输时间和数据流量，编码方案必须能对图片的冗余信息进行压缩，从而保证较高的压缩比。

(三)、编码和解码方便。由于编码方案需要在服务器端和客户端进行协作，考虑到客户端的计算能力，编码方案须能提供高效稳定的编码和解码实现。

综合上述需求，可以选择移植网络图PNG作为编码方案，PNG一方面解决了JPEG解压算法复杂、有损、不支持透明的问题，另一方面又解决了GIF颜色值少、不支持半透明的问题，同时没有BMP等方案压缩比太小的问题。此外，对PNG的编码和解码有成熟的现有算法。

步骤S220：根据客户端的请求消息，服务器通过响应消息将二进制图片文件发送至客户端，并在在响应消息中添加标识信息。

服务器通过响应消息将图片文件传输至客户端，客户端对图片文件内容进行获取。采用XMLHttpRequest完成图片的传输和获取。

步骤S230：客户端根据标识信息调用解码API接口对二进制图片文件进行解码。

根据标识信息，对接收到的响应消息中的二进制图片文件进行解码可以选择以下两种方案：

(一)、将二进制图片文件以字符串形式识别，逐字符地访问得到二进制图片文件信息。具体的实现为：服务器将响应信息中的MIME中指定类型设置为text，将charset设置为iso-8859-1。该方案客户端兼容性好，缺点是字符串形式访问二进制文件的效率低。

(二)、使用TypedArray进行识别。TypedArray是HTML5新的数据处理API，能够以二进制数字形式直接操作内存数据，提高了数据的处理效率。具体实现为：客户端XMLHttpRequest打开请求消息后，声明responseType为arraybuffer。

例如下面的代码描述了客户端打开请求消息，并将responseType设置为arraybuffer的过程。

var req＝new XMLHttpRequest()；

req.open(″GET″，″/path/to/file.png″，true)；

req.responseType＝″arraybuffer″；

req.send()；

对于支持canvas的平台均支持HTML5TypedArray，可以选择第二种方案。本例采用TypedArray接口进行解码，无需服务器端做特殊处理，同时效率较高。

具体地，服务器使用XMLHttpRequest通过响应消息将图片传输到客户端后，客户端浏览器根据请求对象的response属性得到二进制图片文件的内容，类型为ArrayBuffer，数据包含二进制图片文件。根据PNG文件格式，利用TypedArray接口逐一读出文件头、图片信息、调色盘、压缩后的数据流等信息，其中图片信息包括宽高、颜色空间、压缩算法等。调用deflate算法的TypedArray实现对压缩后的数据流进行解压，得到未压缩的数据流。根据PNG数据流格式，还原颜色值，得到像素数据列表。整个流程的伪码表述如下：

waitForRequestReady()；

data＝req.response；

imageInfo＝getlmageInfo(data)；

compressed＝getCompressedStream(data)；

deflated＝deflate(compressed)；

pixels＝unFilter(deflated，imageInfo)；

步骤S240：客户端将解码之后的图片进行显示。

得到了像素数据信息后，通过Canvas API接口将图片展示到页面中。HTML5 Canvas API中的CanvasRenderingContex2D提供了逐像素操作canvas的支持：ImageData类型。ImageData用来描述一个图片区域的像素信息，包括width，height和data三个属性。ImageData.data属性的类型为Uint8ClampedArray，为TypedArray的子类型。通过canvas API的createImageData或getImageData函数来创建ImageData，并使用Uint8ClampedArray中的set方法将PNG解码算法输出的像素颜色信息拷贝到其中，然后通过canvas的putImageData方法将修改过的像素信息恢复至canvas并进行显示。上述操作步骤的示例代码如下：

png＝decodePNG(response)；

canvas＝getCanvas()；

canvas.width＝png.width；

canvas.height＝png.height；

ctx＝canvas.getContext(′2d′)；

imd＝ctx.createImageData(png.wi

ctx.putImageData(imd，0，0)；

dth，png.height)；

imd.data.set(png.pixels)；

根据本发明实施例的图片传输方法将图片作为普通数据展现在页面上，节省流量的同时，使得页面的呈现效果更加丰富和生动。尤其是在个性化首页的后期开发中，将会有越来越多的图片加如，除了视觉类图片外，还包括很多功能性图片，如设置按钮图片，标识性图片，箭头引导图片，导航条功能图片，更多向右指标等等，在无图模式下均将被屏蔽。通过本方法可以将这些功能性图片在无图模式下被保留，提升用户体验。

下面参考图3描述根据本发明实施例的图片传输系统100，包括服务器110和客户端120。

其中，服务器110用于对图片进行编码以生成二进制图片文件，并根据客户端120的请求消息将二进制图片文件通过响应消息发送至客户端120，以及在在响应消息中添加标识信息；

客户端120用于根据标识信息调用解码API接口对二进制图片文件进行解码，并调用图片显示API接口将解码之后的图片进行显示。

其中，客户端120通过浏览器调用解码API接口和图片显示API接口。解码API接口为TypedArray接口。图片显示API接口为Canvas API接口。二进制图片文件为PNG格式。

在本发明的一个实施例中，浏览器支持HTML5及以上版本，且服务器110通过XMLHttpRequest响应消息将二进制图片文件发送至浏览器。

下面以一个具体的实施例对本系统进行说明，可以理解的是，下述说明仅出于示例目的，本发明的实施例不限于此。

服务器110将图片编码为二进制图片文件。在本发明的一个实施例中，选择编码方案需要考虑以下三个因素：

(三)、编码和解码方便。由于编码方案需要在服务器110端和客户端120进行协作，考虑到客户端120的计算能力，编码方案须能提供高效稳定的编码和解码实现。

根据客户端120的请求消息，服务器110通过响应消息将二进制图片文件发送至客户端120，并在在响应消息中添加标识信息。

服务器110通过响应消息将图片文件传输至客户端120，客户端120对图片文件内容进行获取。采用XMLHttpRequest完成图片的传输和获取。

客户端120根据标识信息调用解码API接口对二进制图片文件进行解码。

(一)、将二进制图片文件以字符串形式识别，逐字符地访问得到二进制图片文件信息。具体的实现为：服务器110将响应信息中的MIME中指定类型设置为text，将charset设置为iso-8859-1。该方案客户端120兼容性好，缺点是字符串形式访问二进制文件的效率低。

(二)、使用TypedArray进行识别。TypedArray是HTML5新的数据处理API，能够以二进制数字形式直接操作内存数据，提高了数据的处理效率。具体实现为：客户端120XMLHttpRequest打开请求消息后，声明responseType为arraybuffer。

例如下面的代码描述了客户端120打开请求消息，并将responseType设置为arraybuffer的过程。

var req＝new XMLHttpRequest()；

req.open(″GET″，″/path/to/file.png″，true)；

req.responseType＝″arraybuffer″；

req.send()；

对于支持canvas的平台均支持HTML5 TypedArray，可以选择第二种方案。本例采用TypedArray接口进行解码，无需服务器110端做特殊处理，同时效率较高。

具体地，服务器110使用XMLHttpRequest通过响应消息将图片传输到客户端120后，客户端120浏览器根据请求对象的response属性得到二进制图片文件的内容，类型为ArrayBuffer，数据包含二进制图片文件。根据PNG文件格式，利用TypedArray接口逐一读出文件头、图片信息、调色盘、压缩后的数据流等信息，其中图片信息包括宽高、颜色空间、压缩算法等。调用deflate算法的TypedArray实现对压缩后的数据流进行解压，得到未压缩的数据流。根据PNG数据流格式，还原颜色值，得到像素数据列表。整个流程的伪码表述如下：

waitForRequestReady()；

data＝req.response；

imageInfo＝getImageInfo(data)；

compressed＝getCompressedStream(data)；

deflated＝deflate(compressed)；

pixels＝unFilter(deflated，imageInfo)；

客户端120将解码之后的图片进行显示。

png＝decodePNG(response)；

canvas＝getCanvas()；

canvas.width＝png.width；

canvas.height＝png.height；

ctx＝canvas.getContext(′2d′)；

imd＝ctx.createImageData(png.wi

ctx.putImageData(imd，0，0)；

dth，png.height)；

imd.data.set(png.pixels)；

根据本发明实施例的图片传输系统将图片作为普通数据展现在页面上，节省流量的同时，使得页面的呈现效果更加丰富和生动。尤其是在个性化首页的后期开发中，将会有越来越多的图片加如，除了视觉类图片外，还包括很多功能性图片，如设置按钮图片，标识性图片，箭头引导图片，导航条功能图片，更多向右指标等等，在无图模式下均将被屏蔽。通过本系统可以将这些功能性图片在无图模式下被保留，提升用户体验。

下面参考图4描述根据本发明实施例的服务器200，包括编码模块210和响应模块220。

其中，编码模块210用于对图片进行编码以生成二进制图片文件；响应模块220用于根据客户端的请求消息将二进制图片文件通过响应消息发送至客户端，以及在在响应消息中添加标识信息。

其中，优选地，二进制图片文件为PNG格式。

在本发明的一个实施例中，响应模块通过XMLHttpRequest响应消息将二进制图片文件发送至客户端。

下面以一个具体的实施例对本服务器进行说明，可以理解的是，下述说明仅出于示例目的，本发明的实施例不限于此。

编码模块210将图片编码为二进制图片文件。在本发明的一个实施例中，选择编码方案需要考虑以下三个因素：

综合上述需求，编码模块210选择移植网络图PNG作为编码方案，PNG一方面解决了JPEG解压算法复杂、有损、不支持透明的问题，另一方面又解决了GIF颜色值少、不支持半透明的问题，同时没有BMP等方案压缩比太小的问题。此外，对PNG的编码和解码有成熟的现有算法。

根据客户端的请求消息，响应模块220通过响应消息将二进制图片文件发送至客户端，并在在响应消息中添加标识信息。响应模块220通过响应消息将图片文件传输至客户端，客户端对图片文件内容进行获取。响应模块220采用XMLHttpRequest完成图片的传输。

根据本发明实施例的服务器将图片编码后传输至客户端，节省流量的同时，使得客户端页面的呈现效果更加丰富和生动。尤其是在个性化首页的后期开发中，将会有越来越多的图片加如，除了视觉类图片外，还包括很多功能性图片，如设置按钮图片，标识性图片，箭头引导图片，导航条功能图片，更多向右指标等等，在无图模式下均将被屏蔽。通过本服务器可以将这些功能性图片在无图模式下被保留，提升用户体验。

下面参考图5描述根据本发明实施例的浏览器300，包括接收模块310、解码模块320和显示模块330。

其中，接收模块310用于接收服务器发送的响应消息，响应消息中包括二进制图片文件及标识信息；解码模块320用于根据标识信息调用解码API接口对二进制图片文件进行解码；显示模块330用于调用图片显示API接口将解码之后的图片进行显示。

其中，解码API接口为TypedArray接口。图片显示API接口为Canvas API接口。

下面以一个具体的实施例对本浏览器进行说明，可以理解的是，下述说明仅出于示例目的，本发明的实施例不限于此。

服务器将图片编码为二进制图片文件，并通过响应消息将二进制图片文件发送至浏览器，并在在响应消息中添加标识信息。接收模块310接收服务器发送的响应消息。

解码模块320根据标识信息调用解码API接口对二进制图片文件进行解码。具体地，根据标识信息，解码模块320解码可以选择以下两种方案：

(一)、将二进制图片文件以字符串形式识别，逐字符地访问得到二进制图片文件信息。具体的实现为：服务器将响应信息中的MIME中指定类型设置为text，将charset设置为iso-8859-1。该方案兼容性好，缺点是字符串形式访问二进制文件的效率低。

例如下面的代码描述了解码模块320打开响应消息，并将responseType设置为arraybuffer的过程。

var req＝new XMLHttpRequest()；

req.open(″GET″，″/path/to/file.png″，true)；

req.responseType＝″arraybuffer″；

req.send()；

具体地，解码模块320根据请求对象的response属性得到二进制图片文件的内容，类型为ArrayBuffer，数据包含二进制图片文件。根据PNG文件格式，利用TypedArray接口逐一读出文件头、图片信息、调色盘、压缩后的数据流等信息，其中图片信息包括宽高、颜色空间、压缩算法等。调用deflate算法的TypedArray实现对压缩后的数据流进行解压，得到未压缩的数据流。根据PNG数据流格式，还原颜色值，得到像素数据列表。整个流程的伪码表述如下：

waitForRequestReady()；

data＝req.response；

imageInfo＝getImageInfo(data)；

compressed＝getCompressedStream(data)；

deflated＝deflate(compressed)；

pixels＝unFilter(deflated，imageInfo)；

显示模块330将解码之后的图片进行显示。显示模块330得到了像素数据信息后，通过Canvas API接口将图片展示到页面中。HTML5Canvas API中的CanvasRenderingContex2D提供了逐像素操作canvas的支持：ImageData类型。ImageData用来描述一个图片区域的像素信息，包括width，height和data三个属性。ImageData.data属性的类型为Uint8ClampedArray，为TypedArray的子类型。通过canvas API的createImageData或getImageData函数来创建ImageData，并使用Uint8ClampedArray中的set方法将PNG解码算法输出的像素颜色信息拷贝到其中，然后通过canvas的putImageData方法将修改过的像素信息恢复至canvas并进行显示。上述操作步骤的示例代码如下：

png＝decodePNG(response)；

canvas＝getCanvas()；

canvas.width＝png.width；

canvas.height＝png.height；

ctx＝canvas.getContext(′2d′)；

imd＝ctx.createImageData(png.wi

ctx.putImageData(imd，0，0)；

dth，png.height)；

imd.data.set(png.pixels)；

根据本发明实施例的浏览器接收服务器编码的图片，解码后在页面上进行显示。在节省流量的同时，使得页面的呈现效果更加丰富和生动。尤其是在个性化首页的后期开发中，将会有越来越多的图片加如，除了视觉类图片外，还包括很多功能性图片，如设置按钮图片，标识性图片，箭头引导图片，导航条功能图片，更多向右指标等等，在无图模式下均将被屏蔽。通过本浏览器可以将这些功能性图片在无图模式下被保留，提升用户体验。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同限定。

Claims

1.一种图片传输方法，其特征在于，包括以下步骤：

服务器对图片进行编码以生成二进制图片文件；

所述服务器根据客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端的浏览器，并在所述响应消息中添加标识信息；

所述客户端根据所述标识信息调用解码API接口对所述二进制图片文件进行解码；以及

所述客户端通过浏览器调用图片显示API接口将解码之后的图片在无图模式下进行显示。

2.如权利要求1所述的图片传输方法，其特征在于，所述客户端通过浏览器调用所述解码API接口和图片显示API接口。

3.如权利要求2所述的图片传输方法，其特征在于，所述浏览器支持HTML5及以上版本，且所述服务器通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述浏览器。

4.如权利要求1－3任一项所述的图片传输方法，其特征在于，所述解码API接口为TypedArray接口。

5.如权利要求1－3任一项所述的图片传输方法，其特征在于，所述图片显示API接口为CanvasAPI接口。

6.如权利要求1－3任一项所述的图片传输方法，其特征在于，所述二进制图片文件为移植网络图形PNG格式。

7.一种图片传输系统，其特征在于，包括服务器和客户端，其中，

所述服务器，用于对图片进行编码以生成二进制图片文件，并根据所述客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端的浏览器，以及在所述响应消息中添加标识信息；

所述客户端，用于根据所述标识信息调用解码API接口对所述二进制图片文件进行解码，并通过浏览器调用图片显示API接口将解码之后的图片在无图模式下进行显示。

8.如权利要求7所述的图片传输系统，其特征在于，所述客户端通过浏览器调用所述解码API接口和图片显示API接口。

9.如权利要求7所述的图片传输系统，其特征在于，所述浏览器支持HTML5及以上版本，且所述服务器通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述浏览器。

10.如权利要求7－9任一项所述的图片传输系统，其特征在于，所述解码API接口为TypedArray接口。

11.如权利要求7－9任一项所述的图片传输系统，其特征在于，所述图片显示API接口为CanvasAPI接口。

12.如权利要求7－9任一项所述的图片传输系统，其特征在于，所述二进制图片文件为PNG格式。

13.一种服务器，其特征在于，包括：

编码模块，用于对图片进行编码以生成二进制图片文件；以及

响应模块，用于根据客户端的请求消息将所述二进制图片文件通过响应消息发送至客户端的浏览器，以及在所述响应消息中添加标识信息，其中，所述客户端根据所述标识信息调用解码API接口对所述二进制图片文件进行解码，并通过浏览器调用图片显示API接口将解码之后的图片在无图模式下进行显示。

14.如权利要求13所述的服务器，其特征在于，所述响应模块通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述客户端。

15.如权利要求13所述的服务器，其特征在于，所述二进制图片文件为PNG格式。

16.一种浏览器，其特征在于，包括：

接收模块，用于接收服务器发送的响应消息，所述响应消息中包括二进制图片文件及标识信息；

解码模块，用于根据所述标识信息调用解码API接口对所述二进制图片文件进行解码；以及

显示模块，用于调用图片显示API接口将解码之后的图片在无图模式下进行显示。

17.如权利要求16所述的浏览器，其特征在于，所述浏览器支持HTML5及以上版本，且所述服务器通过XMLHttpRequest响应消息将所述二进制图片文件发送至所述浏览器。

18.如权利要求16所述的浏览器，其特征在于，所述解码API接口为TypedArray接口。

19.如权利要求16所述的浏览器，其特征在于，所述图片显示API接口为CanvasAPI接口。