基于HTML5的文档在线评阅及批注的实现

蔡向高 刘华泓

摘要：针对现阶段各种Web系统对于电子文档在线评阅及批注功能的支持有限问题，本文提出了一种基于新一代Web技术HTML5的在线评阅及手写批注实现，并支持与服务端进行通信保留修改痕迹。电子文档的全文批注功能是很多OA系统、在线学习系统的重要环节，此技术的实现有助于提高公文批阅、作业批改的效率以及用户体验。

关键词：在线批注;手写批注;HTML5;Web系统

中图分类号：TP311.52   文献标识码：A   论文编号：1674-2117（2015）09-0073-03

● 引言

在各种涉及电子文档的Web系统中，电子文档在线评阅及批注功能是一种重要的用户需求。然而现今阶段，各种Web系统对电子文档一般只提供阅读功能。少数拥有对在线批注功能提供支持的系统，一般要求用户提交基于在线编辑器的富文本，该富文本一般是属于HTML格式，无法支持Word、PDF等格式文档。此外，此类系统批注的实现一般是直接对富文本进行编辑，不支持手写、圈注等符合用户体验的批注模式。

为了实现电子文档在线手写批注的功能，不少系统和学者都采用了ActiveX控件的形式。[1]此类实现方式要求用户在浏览器上安装ActiveX控件或客户端，并且都是以ActiveX控件作为桥接，调用MS Word进行处理，需要用户本机安装MS Office等软件。此类实现方式的另一个问题是，系统虽然可以保留批注信息，但无法感知批注信息的内容。所有的批注结果最终以一个新的Word文档保存，如果第一位用户将所有的内容删除了，第二位用户则无法直接查看原始内容。此外，用户如果在Word文档中嵌入一些脚本，还可能导致安全问题出现。

为此，本文提出一种基于HTML5技术的在线评阅及批注功能的实现，支持手写、文本、圈注等批注模式，通过序列化后可以将批注痕迹上传到服务器并合成批注后的新文档。

● 相关技术

本文实现电子文档在线批注功能，涉及了HTML5、电子文档转换背景图片、批注组件序列化等技术。主要的核心技术为HTML5 Canvas画布、GUI事件机制、背景局部刷新和缓存机制。

1.HTML5 Canvas

HTML5为新一代的标准通用标记语言，其最大的优势是原生支持视频、音频，不使用Flash等插件就可以进行视频播放，大大提高了程序员的开发效率以及避免用户端安装第三方插件的过程。并且HTML5的规范更加清晰，对本地数据存储和对游戏互动提供了良好的支持，现阶段基于HTML5 Canvas的游戏越来越流行，支持在PC端以及手机端运行。

HTML5 Canvas画布标签是HTML5的一个新标签，通过它可使用JavaScript进行2D图形的绘制。使用Canvas，可以使得浏览器原生支持游戏开发、图表制作、视频播放等功能。使用Canvas可以制作出非常绚丽的网页动画效果，而不需要第三方控件。

在HTML5中，与Canvas类似的标签还有SVG。与Canvas逐像素进行渲染的机制不同，SVG是基于XML标记语言描述的2D矢量图形语言，不依赖于分辨率并且支持事件处理机制，但对于游戏等图像密集的应用它并不适合。

由于手写批注的表现形式很难使用矢量语言进行描述，而且过于复杂或过多的描述语言会导致SVG效率下降，因此本文使用Canvas作为在线批注的实现基础。

2.事件机制

采用Canvas进行2D图像绘制，由于它是逐像素进行渲染，所以不支持事件处理机制。手写批注虽然是最贴近实际应用的一种批注模式，但是对于圈注、画线以及撰写评语等批注模式，如果不支持移动、缩放或者编辑功能，将会给实际的使用带来不便。由于HTML5正处于发展时期，目前还没有完善的用户界面类库可供使用，此外大多HTML5类库为游戏开发所用，属于重量级类库。因此，为了实现批注组件的移动、缩放和编辑事件处理，需要实现基于事件机制的编程框架。

在JavaScript的事件机制中，首先为DOM对象添加事件处理函数，当触发的相应事件被捕获时，则执行事件处理函数。[2]在事件机制的运转过程中主要包括捕获和冒泡两个流程。以鼠标事件为例，如果鼠标指针停留在某个最外层DOM对象范围内，将被该DOM对象捕获，捕获过程还将一层一层向内分析鼠标指针是否位于子对象范围，搜集所有符合条件的对象。然后从最内层的对象开始往外冒泡，依次触发各个对象的事件处理函数。

由于Canvas本身属于DOM对象，我们可以在其上注册各类事件，然后在事件处理函数中模拟画布内组件的事件机制。对于画布内的所有批注信息，都以一个组件表示，组件包括该批注的长宽以及坐标属性。使用这些属性，可以判断当前鼠标指针位于哪一些组件之内，从而模拟Javscript的事件机制，模拟事件机制如图1所示。在实现时可以对组件树进行后序遍历找出被触发的组件，即后添加的子组件处于上层，当多个子组件符合条件时，优先选择最上层的组件。由于画布的遮挡作用，如果触发了内层的组件，外层组件一般不触发，如在当前整个画布处于手写模拟状态下，选择了文本组件，则只能移动文本组件，不能同时进行手写批注。所以最里层的组件后向外（上）冒泡，外层组件的事件处理函数实际上会马上返回。

实际实现时，还需要配合各种实际环境进行优化，如判断组件是否处于激活状态以便接收键盘事件。当鼠标按下时，还需要锁定被触发的组件只能是当前被按下的组件。否则在移动或缩放组件时，若鼠标移动过快离开组件范围，将会出现不可预测的结果。此外需要结合Javascript的call或apply函数模拟事件处理函数内部的this指针等机制。

拥有事件处理机制，所有的功能都将由对应的组件自身实现，添加相应的鼠标或键盘事件，极大地提高了程序的开发效率。

3.局部刷新和缓冲机制

由于Canvas画布是逐像素进行渲染，如果每次都重新绘制画布内的组件，刷新频率过高将极大地增加浏览的负担，过低将严重影响用户体验。在Canvas中，每个像素占用4个字节空间，遍历时间复杂度为O（n2）。如将普通的电子文档转换为图片后，单页尺寸一般是595×842像素，如果按每秒10帧计算，将会占用极大的浏览器资源。因此需要判断组件是否处于改变状态，如果状态不变则不重绘画布。但当组件过多，并且进行移动或缩放组件时，重绘画布效率会更低而频率会更高，因此，需要进行局部刷新或采用预先绘制的机制来优化效率。

针对当前激活文本、矩形、圆圈等组件，由于其处于整个画布之上，是最后被绘制到画布之上的，不管其如何被改变，背景都是不变的，因此可以保存背景提高绘制效率。不过画布尺寸较大，此方式仍旧会消耗一些资源。本文的优化策略是在激活组件绘制前，计算它的尺寸和位置，保存所相对应的部分背景区域。每一次改变组件时，只有先将原先所占用的部分背景区域还原，再进行组件绘制，才便于提高绘制效率。

对于手写组件，由于其覆盖整个背景区域，每一次绘制需要遍历整个背景区域，按上述方式绘制的效率不高。因此优化策略是将整个背景按网格划分成为一个个尺寸较小的块区域，重绘时只需要绘制其覆盖的块区域就好了。本系统还将智能计算改变的块区域，每次绘制最多只需要绘制4个块区域。优化后的方法在手写批注占用页面区域较多时，效率仍旧较低，本系统还使用离屏画布技术[3]，对手写批注信息进行预先绘制。

如下页图2所示的三层架构，首先可假定电子文档的原始内容是不可变的，即背景不可变，那么将背景层和组件层分离，背景层使用普通DIV即可，可以在一定程度上提高效率。其次手写批注组件与其他组件（文本、形状）不同，本系统亦将其作为独立一层，直接使用上述的离屏画布作为中间层，将离屏变为不离屏。手写层由于不包括背景信息和其他组件，刷新时永远不需要重绘。添加或擦除手写批注，可以直接绘制在上面。

对于多页文档，采用IFrame包含进来，模拟滚动效果。从效率上考虑，本系统采用缓冲机制，并不会一次性加载所有的页面，每一次只加载当前页以及上下邻近两页。

4.其他

为了优化存储空间，对手写批注信息按块区域储存，没有被绘制的区域不保存信息，并且使用位操作将一个像素由4个字节表示降低到一个位表示，存储空间缩小为原先的三十二分之一。

批注痕迹的保存使用序列化技术，所有的组件都支持序列化和反序列化功能，序列化可以将组件转换为字符串，反序列化可以将字符串转换为组件。序列化主要采用JSON格式，对于字节数组则将其先转换为Base64字符串格式。

在服务器端，支持将原始文档和批注痕迹合成为新的电子文档。为了防止矢量图形转换为图像后失真，除开手写批注外，本系统并不是简单地将Canvas画布的图像截下作为水印添加到原始文档上去，而是在服务端进行反序列化，调用相应的类库进行矢量绘制。手写批注的图像质量也在服务端进行了相应的抗锯齿等优化。

● 功能实现

如图3所示，该电子文档在线批注系统实现了PDF报告在线批注的功能，其他格式的电子文档只需要在转换背景和合成新文档这两个步骤中，使用相应的开源类库进行处理即可。系统提供画笔功能，可以进行手写的批注功能，能够实现擦除的橡皮擦功能。并且提供了文字批注和矢量图形批等功能，可以撰写修改意见以及评语等。文本组件和矢量图形组件支持移动、缩放和编辑功能，基本满足了用户对在线文档进行批注的需求。

系统提供保存功能，可以将批改痕迹上传到服务器端，重载时可以恢复上一次批注的结果。也可以在服务端对原始文档和批注进行合成，并将文本、矢量组件转换为电子文档相应格式的矩形图形，保证电子文本的生成质量。此外可以保留历史的文本输入信息，避免了多次输入同样的信息。这对于批量修改作业，将极大地提高评改的效率，因为学生所犯的错误一般可以归为几大相似的类别。

● 结语

本文探讨了基于Canvas画布的事件机制的模拟实现以及背景局部刷新等技术，利用新一代HTML5技术，不需要借助第三方插件实现在浏览器进行电子文档在线评阅和手写批注功能，并对各种情况或细节进行深度的优化。本系统已经集成于在线学习系统Sakai平台之上，大大提高了学生作业的在线批阅效率，改进了教师的用户体验。本文未支持的批注组件，如带有箭头指向的文本框等，结合本文所探讨的机制可以很容易进行扩展，未来将对电子文档的批注功能作进一步的完善和改进。

参考文献：

[1]王立新，赵元庆.网络编务系统中在线手写批注功能的设计与应用[J].河南大学学报（自然科学版），2010（04）：420-422.

[2]（美）Shelley Powers著.JavaScript核心技术[M].北京：机械工业出版社，2007.

[3]（美）基瑞著.HTML5 Canvas核心技术：图形、动画与游戏开发[M].北京：机械工业出版社，2013.