专利名称：一种ajax实现动态图像增量传输与显示的方法
技术领域：
本发明是一种无需浏览器插件支持的，在B/S架构的客户端利用AJAX实现动态图 像增量传输与显示的方法。涉及领域包括B/S前端开发、远程监控与服务器技术。
背景技术：
随着互联网技术的发展，特别是近几年来，RIA(Rich Internet Application，富 互联网应用程序)的开发模式迅速兴起，许多本地化的应用程序均开始向RIA开发模式发 展。RIA开发模式给用户带来了全新的互动用户界面，在无刷新页面的前提下提供快捷的响 应。RIA客户端开发技术包括Adobe公司的Flex技术、Microsoft公司的Silverlight技 术等。但是，用户在使用传统RIA技术开发的软件之前，需要在客户端安装一个应用环境软 件(如Flash PlayeiNSilverlight等)，每次使用时还需从软件提供者服务器上下载应用 程序，这些繁琐复杂的操作使得传统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产品也实现了这项技术，然而由于AJA利记体育本身并不支持图像编码，其对图形界面更 新只能通过修改、删除和插入HTML元素实现，开发人员对基于AJAX的图形增量传输与显示 技术望而止步。现有的AJAX动态图像传输与显示技术仅只是将动态图像中的每一帧完整 图像用JPEG格式反馈给浏览器，并简单地利用img元素进行显示，没有一种AJAX实现图像 增量传输与显示的方法。
发明内容
本发明的目的在于提供一种在B/S架构下，使用AJA利记体育实现动态图像增量传输 与显示的方法，解决传统AJA利记体育传输动态画面时网络资源消耗大与资源利用不科学的 问题。传统的动态图像传输方法每帧的数据都包含完整的图像，网络通信量非常之大。 解决这个问题的常用方法即使用图像增量传输技术。图像增量传输技术包含两类，一类是 时间增量方式，另一类是坐标增量方式。这两类图像增量传输技术在C/S架构的软件中应 用较多，但在B/S的纯浏览器客户端中，因为浏览器脚本没有图像处理能力，使得开发人员 对在该环境中的图像增量传输与显示技术望而却步。
该发明包括在浏览器端使用AJA利记体育实现图像增量传输与显示的方法，包括浏 览器端的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元素样式p0Siti0n、left、t0p属性定位到页面相应位置， 其样式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文档中取得，添加的图层利用样式p0Siti0n、left、t0p、Z-index定位在 远程图像层的位置，用样式background定位显示的区域在B3步骤解析得到图像中的位置。 设置img元素src属性为在B3步骤解析得到的图像URL地址。该步骤中修改img元素src 属性会使img元素重新加载，img元素加载完毕后会再次触发onload事件执行B7步骤。img元素的onload事件会在该元素src属性所指向的图像加载完毕后自动触发。其中B7步骤始终由img元素onload事件触发，该发明利用“发送请求_更新img对象-触发发送请求_更新img对象-触发发送请求”这样的循环操作实现图像实时传输。这里所说的“完全刷新操作”指的是客户端首次向服务端发送请求获得完整图像、 或客户端与服务端图像不同步时进行的操作，其发送的请求被称作“完全刷新请求”。“部分 刷新操作”与“完全刷新操作”相对，指的是客户端在现有图像的基础上向服务端发送请求 获的增量图像及相关信息时的操作，其发送的请求被称作“部分刷新请求”。图4是本发明所描述方法服务端工作的流程图。参见图4，服务端具体工作步骤如 下Sl步骤服务器收到来自客户端的请求；S2步骤通过Sl步骤收到的请求所带的参数判断此次请求是完全刷新请求或是 部分刷新请求，若是完全刷新请求则执行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寻找差异区域时，可定义曼哈顿距离小于高宽之和的的两个像素点是相互 连接的，以平衡差异区域数量，提高图像处理速度与客户端解析拆分速度；在第二步中，可 简单地将每块差异区域所在的最小矩形直接划成差异矩形，但这种方法在同时存在长差异 矩形与宽差异矩形特殊情况下会使得第三步生成的新矩形过大，导致增量数据过大，因此在拆分时需要把每块的高度与宽度限定在一定范围内，范围的确定可由当前图像的高宽确定；一般情况下，第三步可用深度优先搜索算法寻找最优的拼接方法。以上所涉及到的公知算法不包括在本发明范围内，在这些步骤使用类似算法达到 相同目的方法也属于本发明所描述的方法。当客户端发送的请求为完全刷新请求时，服务端返回的XML文档应当包含图像文 件URL地址、图像高宽以及完全刷新文本标志。当客户端发送的请求为部分刷新请求时，月艮 务端返回的XML文档应包含图像文件URL地址、部分刷新文本标志以及各差异矩形在原BMP 图像中的位置信息和在拼接后图像中的位置信息。位置信息包括差异矩形所在的像素位置 (即矩形左侧象素点个数和矩形上方象素点个数)以及差异矩形的大小(即差异矩形横向 象素点个数及纵向象素点个数)。一般情况下，完全刷新操作只执行一次，此后触发的操作均为部分刷新操作，在如 下的2种特殊情况下，部分刷新操作的处理方式可进行变动1、在原始图像与当前图像完全一致时，返回的XML文档不再包含新的图像访问地 址，图像更新文本标志更换为表示无须更新的文本标志，客户端处理时直接触发新的部分 刷新操作；2、在客户端远程图像层内图层数达到一定量时，客户端不触发执行部分刷新操 作，而触发执行完全刷新操作。图4中S7步骤的图像处理具体实现方式可能会对本发明所提供方法的实际应用 效果产生影响，本发明专利不包括该步骤中图像处理的具体算法。本发明所提供的方法可用于制作B/S架构的远程计算机桌面监控软件和远程 视频监控软件，在制作B/S架构远程计算机桌面监控软件上带来的速度与性能的提升更 明显。在制作远程计算机桌面监控软件之需要在以上方法的基础上，在控制感应层设置 onmousemove、onclick、onmousedown禾口 onmouseup等事件，记录客户端鼠标的动作，将动作 信息作为图3中B7步骤发送请求的参数之一，服务端在图4中Sl操作后根据参数模拟相 关动作，即可实现带鼠标控制功能的B/S远程计算机桌面监控。使用本发明提供的方法制作的B/S架构远程计算机桌面监控软件，客户端用户无 需下载安装应用程序，打开网页即可使用，同时可跨平台使用，支持移动智能设备。同时在 性能方面，较未使用本发明所提供的方法制作的B/S无需插件支持的同类软件，本发明所 提供的方案最高能节省90%以上的网络通信量，在特定网络环境下可提供数十倍的图像更 新速度。开发人员使用本发明所提供的方法进行软件开发，无需具备图形编码知识。服务 端可使用微软IIS软件、ASP技术以及COM+技术实现。通过对本发明所提供的方法进行改造和扩充，也可以实现一服务器对多客户、动 态图像源与服务器分离、三端混合架构的多用户对多动态图像源等多种应用。
权利要求
一种浏览器用AJAX实现动态图像增量传输与显示的方法，其特征在于，包括以下步骤步骤1客户端向服务端发送请求；步骤2服务端将动态图像当前瞬时图像的完整图像以及图像信息XML文档返回给客户端；步骤3客户端将服务端返回的完整图像显示在网页上，并设置加载完毕触发执行步骤4；步骤4客户端向服务端发送请求；步骤5服务端将增量数据图像以及包含图像信息和客户端显示方法信息的XML文档返回给客户端；步骤6客户端按照服务端返回的XML文档，将增量数据图像显示在网页上，并设置加载完毕触发执行步骤4。
2.根据权利要求1所述的方法，其特征在于，所述客户端为浏览器，客户端不依靠第三 方厂商提供的运行环境或是浏览器插件。
3.根据权利要求2所述的方法，其特征在于，所述客户端使用JavaScript、 XML (Extensible Markup Language, nJ^T'MfeiSip'lir ) > CSS (Cascading Style Sheets, M 叠样式表)和 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事件触发加载完毕执行。
全文摘要
传统的动态图像增量传输与显示应用一般采用C/S架构实现。B/S架构的AJAX(Asynchronous Java Script and XML，异步Java Script与XML)应用具有客户端文件小、无需安装运行环境与可跨平台使用等诸多优秀特性，但由于Java Script不支持图像编码，开发人员对AJAX实现动态图像的增量技术望而却步，始终没有一个真正能够实现的方法。本发明的目的就是提供这样一个AJAX实现动态图像增量传输与显示的方法。
文档编号G06F17/30GK101860734SQ20091004305
公开日2010年10月13日 申请日期2009年4月7日 优先权日2009年4月7日
发明者谢亚南 申请人:谢亚南