CN101860734A - 一种ajax实现动态图像增量传输与显示的方法 - Google Patents

Abstract

传统的动态图像增量传输与显示应用一般采用C/S架构实现。B/S架构的AJAX(Asynchronous Java Script and XML，异步Java Script与XML)应用具有客户端文件小、无需安装运行环境与可跨平台使用等诸多优秀特性，但由于Java Script不支持图像编码，开发人员对AJAX实现动态图像的增量技术望而却步，始终没有一个真正能够实现的方法。本发明的目的就是提供这样一个AJAX实现动态图像增量传输与显示的方法。

Description

一种AJAX实现动态图像增量传输与显示的方法

技术领域：

本发明是一种无需浏览器插件支持的，在B/S架构的客户端利用AJAX实现动态图像增量传输与显示的方法。涉及领域包括B/S前端开发、远程监控与服务器技术。

背景技术：

随着互联网技术的发展，特别是近几年来，RIA(Rich Internet Application，富互联网应用程序)的开发模式迅速兴起，许多本地化的应用程序均开始向RIA开发模式发展。RIA开发模式给用户带来了全新的互动用户界面，在无刷新页面的前提下提供快捷的响应。RIA客户端开发技术包括Adobe公司的Flex技术、Microsoft公司的Silverlight技术等。但是，用户在使用传统RIA技术开发的软件之前，需要在客户端安装一个应用环境软件(如Flash Player、Silverlight等)，每次使用时还需从软件提供者服务器上下载应用程序，这些繁琐复杂的操作使得传统RIA客户端在移动性与跨平台能力上甚至还不如传统的本地化应用程序好。AJAX(Asynchronous JavaScript and XML，异步JavaScript与XML)是一种结合了DHTML、XML与JavaScript技术的全新网页开发技术，它拥有RIA的大多数优秀特性，它的客户端无需预先安装环境支持软件，它的应用程序通常只有数千字节，它的软件更新后用户无需等待升级，这些都是传统RIA开发模式所不具备的特性。由于它是符合WSC标准的，得到了近乎所有的浏览器的支持。使用它构建的应用程序具备无须安装、无须刷新、快速响应等特点，应用十分广泛，最为知名的应用是Google公司的Gmail与Google Map产品，其中Google Map通过AJAX解析XSLT文档实现动态内容更新。

远程监控技术中的图像传输与显示技术是最为核心的技术。在技术较为先进的C/S架构解决方案中，一般采用图像增量传输技术以降低网络要求，节省带宽开销。当前许多RIA产品也实现了这项技术，然而由于AJAX技术本身并不支持图像编码，其对图形界面更新只能通过修改、删除和插入HTML元素实现，开发人员对基于AJAX的图形增量传输与显示技术望而止步。现有的AJAX动态图像传输与显示技术仅只是将动态图像中的每一帧完整图像用JPEG格式反馈给浏览器，并简单地利用img元素进行显示，没有一种AJAX实现图像增量传输与显示的方法。

发明内容：

本发明的目的在于提供一种在B/S架构下，使用AJAX技术实现动态图像增量传输与显示的方法，解决传统AJAX技术传输动态画面时网络资源消耗大与资源利用不科学的问题。

传统的动态图像传输方法每帧的数据都包含完整的图像，网络通信量非常之大。解决这个问题的常用方法即使用图像增量传输技术。图像增量传输技术包含两类，一类是时间增量方式，另一类是坐标增量方式。这两类图像增量传输技术在C/S架构的软件中应用较多，但在B/S的纯浏览器客户端中，因为浏览器脚本没有图像处理能力，使得开发人员对在该环境中的图像增量传输与显示技术望而却步。

该发明包括在浏览器端使用AJAX技术实现图像增量传输与显示的方法，包括浏览器端的AJAX实现以及服务端的Web服务、图形处理及数据编码方法。

该发明包括在浏览器端使用img元素onload事件实现触发式通信的方法，即通过更新img元素的src属性设置onload事件，实现“触发事件-更新属性-触发事件-更新属性”循环触发方式的动态图像即时更新。

该发明的浏览器端Ajax技术包括XML文档图像拆分布局信息以及对图像的拆分布局方法。

该发明中的服务端动态图像预处理方法包括对原始图像与当前图像的对比、差异区域划分，最终拼接成一个新的图像的方法。

该发明包括的主要步骤如下：

步骤a：客户端(即浏览器，下同)向服务器发送请求；

步骤b：服务端从动态图像中截取当前帧完整画面并保存为未经过压缩的BMP图像文件以及经过压缩可访问图像文件，再将包括可访问图像信息的XML文档返回给客户端；

步骤c：客户端接收到数据后解析XML文档，在页面中添加一个img元素，设置其src属性为步骤b保存的可访问图像的URL地址，设置其onload事件触发进行步骤d，在页面中添加一个背景为步骤b保存的可访问图像、显示高宽与步骤b保存的可访问图像相同、绝对定位、样式z-index属性为0的div元素；

步骤d：由步骤c添加的img元素onload事件触发本步骤后，客户端再次向服务端发送请求；

步骤e：服务端从动态图像中截取当前帧完整画面，并保存为未经过压缩的BMP图像；

步骤f：服务端将步骤e保存的BMP图像与步骤b保存的BMP图像进行对比，将步骤e保存的BMP图像中与步骤b保存的BMP图像有差异的部分以及有差异部分的周边部分划分成若干矩形区域；

步骤g：服务端将步骤f中从步骤e保存的BMP图像中提取出来的若干矩形区域拼接成新的图像，并保存为经过压缩后的可访问的图像文件；

步骤h：服务端将步骤b中保存的BMP图像文件替换成步骤e中保存的BMP图像文件，将步骤b中保存的经过压缩可访问图像文件删除，并将包含步骤g保存的可访问图像信息、步骤f的划分方法信息以及步骤g拼接方法信息的XML文档返回给客户端；

步骤i：客户端收到数据后解析XML文档，在页面中添加与步骤f划分矩形区域数量相同数量的div元素，利用div元素样式position、left、top属性定位到页面相应位置，其样式z-index属性值均按本步骤的执行次数依次递增，实现图层的叠加显示。修改步骤c添加的img元素的src属性为步骤g保存地可访问图像的URL地址，img元素的onload事件会自动触发执行步骤d。

服务端动态图像可持续更新，实现客户端图像与动态图像源在时间上一致。

服务端保存经过压缩的可访问图像时，可选用JPEG格式进行压缩，亦可选用PNG格式或其他浏览器可支持的图像格式进行保存。

步骤b由服务端返回给客户端的XML文档包含的可访问图像信息包括图像的URL地址、图像的高和宽。

步骤i由服务端返回给客户端的XML文档包含的可访问图像信息包括图像的URL地址、图像的高和宽，包含的步骤f划分方法信息包括每次划分矩形区域在原BMP图像中的位置，包括每个矩形区域的左上角坐标和矩形区域长、宽，包含的步骤g拼接方法信息包括每个矩形区域在步骤g保存的图像中的位置，包括每个矩形区域的左上角坐标。

在步骤d中，若当前页面上div元素过多，可将所有添加的div元素以及img元素清除，重新从步骤a开始执行，降低客户端的内存消耗。

利用该方法实现的远程监控软件或在线视频播放器，客户端无需另外安装任何软件或浏览器插件，用户直接打开网页进行使用，将客户端支持设备的范围扩充到一切拥有标准互联网浏览器的设备(除个人电脑外还有部分移动智能设备)，同时借助浏览器的安全设置，保证了客户端免受其他因素的安全威胁。通过只对图像有变化的矩形区域进行更新，实现了快速高效的动态图像增量传输与显示。

替换上述步骤中涉及到的属性、元素等信息或在上述步骤中插入其它步骤达到相同或类似目的的方法均属于本发明专利所要求保护的范围。

附图说明：

图1是本发明所描述方法构建的总体架构的示意图。

图2是本发明所描述方法涉及结构的层次图。

图3是本发明所描述方法客户端工作的流程图。

图4是本发明所描述方法服务端工作的流程图。

图5是本发明所描述方法中部分刷新操作图形处理的一个实例示意图。

具体实施方法：

以下，参照附图来说明本发明说描述的方法。在下面的说明中，未详细说明公知的技术细节或其他术语，因为它们会在不必要的细节上混淆本发明。

图1是本发明所描述方法构建的总体架构的示意图。参见图1，客户端与服务端通过标准的HTTP协议进行通信，数据以Post或Get方法提交，其中客户端可为个人电脑、移动智能设备或其他拥有支持或基本支持W3C标准浏览器的设备，服务端为具备图形处理、信息编码、网络通信、Web服务功能的电子计算机或者微电脑等设备。服务端提供Web服务，包括数据传输、请求处理等。

客户端首次访问服务端时，浏览器从服务端下载页面XHTML、CSS以及JavaScript代码并呈现给用户，同时执行JavaScript代码中的相关程序，通过XMLHTTP(微软环境)对象或XMLHttpRequest(其他环境)对象(下文将这2类对象称作XMLRequest对象)与服务端进行余下的通信工作，其通信方法以及原理是公知的，这里不再作描述。

图2是上述XHTML与CSS布局中涉及到该发明部分结构的层次图。参见图2，布局中涉及3个涉及到该发明的层(这里层的概念并不等同于XHTML中的div标签)，分别为“控制感应层”、“远程图像层”以及“辅助功能层”。其中控制感应层在XHTML文档中是一个div标签，使用层叠样式表(Cascading Style Sheets)的position属性、left属性、top属性、z-index属性固定在页面中特定位置，其z-index属性值取最大值(一般256)。远程图像层定位在控制感应层的下方，辅助功能层则独立于控制感应层与远程图像层，可用层叠样式表的display属性隐藏。

远程图像层中可包含多个div标签，这里将这些div标签称作图层，通过设置图层position、left、top样式属性实现图层在远程图像层中的定位，通过设置图层z-index样式属性实现图层的叠加。该发明利用图层的定位与叠加实现图像的区域更新，即增量显示。控制感应层用于提供设备对图像操作位置的感应功能，若将本发明应用到电子计算机远程屏幕监控中，控制感应层可用于获取鼠标相对于远程图像层的相对位置以及感应单击、双击等操作，以实现鼠标的模拟远程控制。辅助功能层是用于存放该方法实施过程中需要引入的而无需与用户进行交互XHTML对象的容器，通过设置display样式属性进行隐藏，是实施该发明必不可少的一部分。

图3是本发明所描述方法客户端工作的流程图。参见图3，客户端具体工作步骤如下：

B1步骤：用户打开网页，触发JavaScript脚本。这里的触发方式有多种，可为网页加载完毕后自动触发，也可由用户单击按钮触发；

B2步骤：浏览器通过XMLRequest对象向服务端发送请求(Request)。XMLRequest对象是浏览器内置的对象，可通过JavaScript直接利用，是AJAX的核心技术。本次请求提交的信息包括一个表示本次请求为完全刷新操作的参数；

B3步骤：客户端接收到服务端返回XML文档。在XML文档接收完成后，使用DOM(Document Object Model，文档对象模型)解析其中后续步骤所需要的信息；

B4步骤：判断本次操作是否是完全刷新操作。判断本次操作是否为完全刷新操作依据是B3步骤中从XML文档中解析出来的信息。若本次操作是完全刷新操作则进入B5步骤，否则执行B8步骤；

B5步骤：清空远程图像层、辅助功能层内的元素。该操作仅在远程图像层(可能包含div图层)、辅助功能层内(可能包含img元素)有元素的情况下执行；

B6步骤：在远程图像层内添加图层，在辅助功能层内添加img元素并设置触发。图层可用div元素，通过设置其样式background、position、left、top、z-index属性实现图层的显示定位与叠加，这里的z-index属性值为0。添加的img元素的src属性为B3步骤中解析得到的图像URL地址，设置其onload事件触发执行B7步骤；

B7步骤：发送部分刷新请求。该步骤由步骤B6或步骤B9更新img元素触发执行。该步骤执行完毕后执行步骤B3；

B8步骤：去除新图层完全覆盖的图层。判断远程图像区现有的图层中是否有能被B9步骤中将要添加图层完全覆盖的图层，若有则将其去除。图层信息在B3步骤中从XML文档中解析取得；

B9步骤：在远程图像层添加图层，更新辅助功能层img元素。图层添加方式信息，在B3步骤中从XML文档中取得，添加的图层利用样式position、left、top、z-index定位在远程图像层的位置，用样式background定位显示的区域在B3步骤解析得到图像中的位置。设置img元素src属性为在B3步骤解析得到的图像URL地址。该步骤中修改img元素src属性会使img元素重新加载，img元素加载完毕后会再次触发onload事件执行B7步骤。

img元素的onload事件会在该元素src属性所指向的图像加载完毕后自动触发。其中B7步骤始终由img元素onload事件触发，该发明利用“发送请求-更新img对象-触发发送请求-更新img对象-触发发送请求”这样的循环操作实现图像实时传输。

这里所说的“完全刷新操作”指的是客户端首次向服务端发送请求获得完整图像、或客户端与服务端图像不同步时进行的操作，其发送的请求被称作“完全刷新请求”。“部分刷新操作”与“完全刷新操作”相对，指的是客户端在现有图像的基础上向服务端发送请求获的增量图像及相关信息时的操作，其发送的请求被称作“部分刷新请求”。

图4是本发明所描述方法服务端工作的流程图。参见图4，服务端具体工作步骤如下：

S1步骤：服务器收到来自客户端的请求；

S2步骤：通过S1步骤收到的请求所带的参数判断此次请求是完全刷新请求或是部分刷新请求，若是完全刷新请求则执行S3步骤，否则执行S6步骤；

S3步骤：从动态图像中截取瞬时图像并保存为BMP图像文件。这里的BMP图像文件的文件路径与文件名是固定不变的，后续步骤中将会对该文件进行替换；

S4步骤：将BMP图像文件压缩并保存在可访问路径下。一般情况下可用JPEG格式保存，也可用PNG或其他浏览器支持的格式保存，该文件保存在可访问的路径下，以便客户端能够正常访问；

S5步骤：将包含压缩后图像文件信息的XML文档返回给客户端。该XML文档包括图像文件URL地址、图像高、宽以及表示该次操作为完全刷新操作的文本标志；

S6步骤：从动态图像中截取当前瞬时图像并保存为BMP图像文件。该步骤保存的文件与S3步骤保存的文件路径与文件名不同，后续步骤将对两图像进行对比；

S7步骤：将S6步骤所保存BMP图像与上次请求保存BMP图像的差异部分划分成矩形并重新拼接。将两图像的差异部分及差异部分周边区域划分成若干矩形区域，并将这些矩形区域拼接成一个新的图像；

S8步骤：将拼接后的图像压缩保存在可访问路径下。拼接后的图像指的是S7步骤中拼接出的新图像；

S9步骤：将包含压缩后图像文件信息与划分拼接信息的XML文档返回给客户端。

图5是本发明所描述方法中部分刷新操作图形处理的一个实例示意图，如图5所示，部分刷新操作对图像的处理(即图4所示S7步骤)分3步完成：

第一步：逐像素点对比当前图像与上帧图像(指上次操作所保存的图像)并用FloodFill算法找出差异区域；

第二步：将在当前图像上的这些差异区域划分成若干矩形，这里将这些矩形区域称作差异矩形；

第三步：将差异矩形图像拼接成一个新的矩形图像，并保存为一个静态图像文件，替换原来的原始图像文件。

在第一步中，只要像素点颜色不完全相同就认为该像素点属于差异区域，在使用FloodFill寻找差异区域时，可定义曼哈顿距离小于高宽之和的1％的两个像素点是相互连接的，以平衡差异区域数量，提高图像处理速度与客户端解析拆分速度；在第二步中，可简单地将每块差异区域所在的最小矩形直接划成差异矩形，但这种方法在同时存在长差异矩形与宽差异矩形特殊情况下会使得第三步生成的新矩形过大，导致增量数据过大，因此在拆分时需要把每块的高度与宽度限定在一定范围内，范围的确定可由当前图像的高宽确定；一般情况下，第三步可用深度优先搜索算法寻找最优的拼接方法。

以上所涉及到的公知算法不包括在本发明范围内，在这些步骤使用类似算法达到相同目的方法也属于本发明所描述的方法。

当客户端发送的请求为完全刷新请求时，服务端返回的XML文档应当包含图像文件URL地址、图像高宽以及完全刷新文本标志。当客户端发送的请求为部分刷新请求时，服务端返回的XML文档应包含图像文件URL地址、部分刷新文本标志以及各差异矩形在原BMP图像中的位置信息和在拼接后图像中的位置信息。位置信息包括差异矩形所在的像素位置(即矩形左侧象素点个数和矩形上方象素点个数)以及差异矩形的大小(即差异矩形横向象素点个数及纵向象素点个数)。

一般情况下，完全刷新操作只执行一次，此后触发的操作均为部分刷新操作，在如下的2种特殊情况下，部分刷新操作的处理方式可进行变动：

1、在原始图像与当前图像完全一致时，返回的XML文档不再包含新的图像访问地址，图像更新文本标志更换为表示无须更新的文本标志，客户端处理时直接触发新的部分刷新操作；

2、在客户端远程图像层内图层数达到一定量时，客户端不触发执行部分刷新操作，而触发执行完全刷新操作。

图4中S7步骤的图像处理具体实现方式可能会对本发明所提供方法的实际应用效果产生影响，本发明专利不包括该步骤中图像处理的具体算法。

本发明所提供的方法可用于制作B/S架构的远程计算机桌面监控软件和远程视频监控软件，在制作B/S架构远程计算机桌面监控软件上带来的速度与性能的提升更明显。在制作远程计算机桌面监控软件之需要在以上方法的基础上，在控制感应层设置onmousemove、onclick、onmousedown和onmouseup等事件，记录客户端鼠标的动作，将动作信息作为图3中B7步骤发送请求的参数之一，服务端在图4中S1操作后根据参数模拟相关动作，即可实现带鼠标控制功能的B/S远程计算机桌面监控。

使用本发明提供的方法制作的B/S架构远程计算机桌面监控软件，客户端用户无需下载安装应用程序，打开网页即可使用，同时可跨平台使用，支持移动智能设备。同时在性能方面，较未使用本发明所提供的方法制作的B/S无需插件支持的同类软件，本发明所提供的方案最高能节省90％以上的网络通信量，在特定网络环境下可提供数十倍的图像更新速度。

开发人员使用本发明所提供的方法进行软件开发，无需具备图形编码知识。服务端可使用微软IIS软件、ASP技术以及COM+技术实现。

通过对本发明所提供的方法进行改造和扩充，也可以实现一服务器对多客户、动态图像源与服务器分离、三端混合架构的多用户对多动态图像源等多种应用。

Claims (8)

1.一种浏览器用AJAX实现动态图像增量传输与显示的方法，其特征在于，包括以下步骤：

步骤1：客户端向服务端发送请求；

步骤2：服务端将动态图像当前瞬时图像的完整图像以及图像信息XML文档返回给客户端；

步骤3：客户端将服务端返回的完整图像显示在网页上，并设置加载完毕触发执行步骤4；

步骤4：客户端向服务端发送请求；

步骤5：服务端将增量数据图像以及包含图像信息和客户端显示方法信息的XML文档返回给客户端；

步骤6：客户端按照服务端返回的XML文档，将增量数据图像显示在网页上，并设置加载完毕触发执行步骤4。

2.根据权利要求1所述的方法，其特征在于，所述客户端为浏览器，客户端不依靠第三方厂商提供的运行环境或是浏览器插件。

3.根据权利要求2所述的方法，其特征在于，所述客户端使用JavaScript、XML(Extensible Markup Language，可扩展标记语言)、CSS(Cascading Style Sheets，层叠样式表)和XHTML(The Extensible Hyper Text Mark-up Language，可扩展超文本标记语言)或HTML(Hyper Text Mark-up Language，超文本标记语言)技术实现。

4.根据权利要求1所述的方法，其特征在于，所述增量数据图像由动态图像当前瞬时图像中的若干矩形图像组成的一个支持在浏览器上显示的图像。

5.根据权利要求4所述的方法，其特征在于，所述若干矩形图像区域为，前后两次服务端接收请求时，动态图像瞬时图像差异部分所在的矩形区域。

6.根据权利要求1所述的方法，其特征在于，所述步骤6中将增量数据图像显示在网页上的操作，是利用HTML元素定位、叠加实现的。

7.根据权利要求6所述的方法，其特征在于，所述定位、叠加的实现，利用了CSS的background、position、left、top、z-index属性。

8.根据权利要求1所述的方法，其特征在于，所述触发执行方法为通过修改img元素的src属性引发加载，利用onload事件触发加载完毕执行。

Images