基于HTML5的文檔在線評(píng)閱及批注的實(shí)現(xiàn)

蔡向高 劉華泓

摘要：針對(duì)現(xiàn)階段各種Web系統(tǒng)對(duì)于電子文檔在線評(píng)閱及批注功能的支持有限問(wèn)題，本文提出了一種基于新一代Web技術(shù)HTML5的在線評(píng)閱及手寫(xiě)批注實(shí)現(xiàn)，并支持與服務(wù)端進(jìn)行通信保留修改痕跡。電子文檔的全文批注功能是很多OA系統(tǒng)、在線學(xué)習(xí)系統(tǒng)的重要環(huán)節(jié)，此技術(shù)的實(shí)現(xiàn)有助于提高公文批閱、作業(yè)批改的效率以及用戶(hù)體驗(yàn)。

關(guān)鍵詞：在線批注;手寫(xiě)批注;HTML5;Web系統(tǒng)

中圖分類(lèi)號(hào)：TP311.52 ? 文獻(xiàn)標(biāo)識(shí)碼：A ? 論文編號(hào)：1674-2117（2015）09-0073-03

● 引言

在各種涉及電子文檔的Web系統(tǒng)中，電子文檔在線評(píng)閱及批注功能是一種重要的用戶(hù)需求。然而現(xiàn)今階段，各種Web系統(tǒng)對(duì)電子文檔一般只提供閱讀功能。少數(shù)擁有對(duì)在線批注功能提供支持的系統(tǒng)，一般要求用戶(hù)提交基于在線編輯器的富文本，該富文本一般是屬于HTML格式，無(wú)法支持Word、PDF等格式文檔。此外，此類(lèi)系統(tǒng)批注的實(shí)現(xiàn)一般是直接對(duì)富文本進(jìn)行編輯，不支持手寫(xiě)、圈注等符合用戶(hù)體驗(yàn)的批注模式。

為了實(shí)現(xiàn)電子文檔在線手寫(xiě)批注的功能，不少系統(tǒng)和學(xué)者都采用了ActiveX控件的形式。[1]此類(lèi)實(shí)現(xiàn)方式要求用戶(hù)在瀏覽器上安裝ActiveX控件或客戶(hù)端，并且都是以ActiveX控件作為橋接，調(diào)用MS Word進(jìn)行處理，需要用戶(hù)本機(jī)安裝MS Office等軟件。此類(lèi)實(shí)現(xiàn)方式的另一個(gè)問(wèn)題是，系統(tǒng)雖然可以保留批注信息，但無(wú)法感知批注信息的內(nèi)容。所有的批注結(jié)果最終以一個(gè)新的Word文檔保存，如果第一位用戶(hù)將所有的內(nèi)容刪除了，第二位用戶(hù)則無(wú)法直接查看原始內(nèi)容。此外，用戶(hù)如果在Word文檔中嵌入一些腳本，還可能導(dǎo)致安全問(wèn)題出現(xiàn)。

為此，本文提出一種基于HTML5技術(shù)的在線評(píng)閱及批注功能的實(shí)現(xiàn)，支持手寫(xiě)、文本、圈注等批注模式，通過(guò)序列化后可以將批注痕跡上傳到服務(wù)器并合成批注后的新文檔。

● 相關(guān)技術(shù)

本文實(shí)現(xiàn)電子文檔在線批注功能，涉及了HTML5、電子文檔轉(zhuǎn)換背景圖片、批注組件序列化等技術(shù)。主要的核心技術(shù)為HTML5 Canvas畫(huà)布、GUI事件機(jī)制、背景局部刷新和緩存機(jī)制。

1.HTML5 Canvas

HTML5為新一代的標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，其最大的優(yōu)勢(shì)是原生支持視頻、音頻，不使用Flash等插件就可以進(jìn)行視頻播放，大大提高了程序員的開(kāi)發(fā)效率以及避免用戶(hù)端安裝第三方插件的過(guò)程。并且HTML5的規(guī)范更加清晰，對(duì)本地?cái)?shù)據(jù)存儲(chǔ)和對(duì)游戲互動(dòng)提供了良好的支持，現(xiàn)階段基于HTML5 Canvas的游戲越來(lái)越流行，支持在PC端以及手機(jī)端運(yùn)行。

HTML5 Canvas畫(huà)布標(biāo)簽是HTML5的一個(gè)新標(biāo)簽，通過(guò)它可使用JavaScript進(jìn)行2D圖形的繪制。使用Canvas，可以使得瀏覽器原生支持游戲開(kāi)發(fā)、圖表制作、視頻播放等功能。使用Canvas可以制作出非常絢麗的網(wǎng)頁(yè)動(dòng)畫(huà)效果，而不需要第三方控件。

在HTML5中，與Canvas類(lèi)似的標(biāo)簽還有SVG。與Canvas逐像素進(jìn)行渲染的機(jī)制不同，SVG是基于XML標(biāo)記語(yǔ)言描述的2D矢量圖形語(yǔ)言，不依賴(lài)于分辨率并且支持事件處理機(jī)制，但對(duì)于游戲等圖像密集的應(yīng)用它并不適合。

由于手寫(xiě)批注的表現(xiàn)形式很難使用矢量語(yǔ)言進(jìn)行描述，而且過(guò)于復(fù)雜或過(guò)多的描述語(yǔ)言會(huì)導(dǎo)致SVG效率下降，因此本文使用Canvas作為在線批注的實(shí)現(xiàn)基礎(chǔ)。

2.事件機(jī)制

采用Canvas進(jìn)行2D圖像繪制，由于它是逐像素進(jìn)行渲染，所以不支持事件處理機(jī)制。手寫(xiě)批注雖然是最貼近實(shí)際應(yīng)用的一種批注模式，但是對(duì)于圈注、畫(huà)線以及撰寫(xiě)評(píng)語(yǔ)等批注模式，如果不支持移動(dòng)、縮放或者編輯功能，將會(huì)給實(shí)際的使用帶來(lái)不便。由于HTML5正處于發(fā)展時(shí)期，目前還沒(méi)有完善的用戶(hù)界面類(lèi)庫(kù)可供使用，此外大多HTML5類(lèi)庫(kù)為游戲開(kāi)發(fā)所用，屬于重量級(jí)類(lèi)庫(kù)。因此，為了實(shí)現(xiàn)批注組件的移動(dòng)、縮放和編輯事件處理，需要實(shí)現(xiàn)基于事件機(jī)制的編程框架。

在JavaScript的事件機(jī)制中，首先為DOM對(duì)象添加事件處理函數(shù)，當(dāng)觸發(fā)的相應(yīng)事件被捕獲時(shí)，則執(zhí)行事件處理函數(shù)。[2]在事件機(jī)制的運(yùn)轉(zhuǎn)過(guò)程中主要包括捕獲和冒泡兩個(gè)流程。以鼠標(biāo)事件為例，如果鼠標(biāo)指針停留在某個(gè)最外層DOM對(duì)象范圍內(nèi)，將被該DOM對(duì)象捕獲，捕獲過(guò)程還將一層一層向內(nèi)分析鼠標(biāo)指針是否位于子對(duì)象范圍，搜集所有符合條件的對(duì)象。然后從最內(nèi)層的對(duì)象開(kāi)始往外冒泡，依次觸發(fā)各個(gè)對(duì)象的事件處理函數(shù)。

由于Canvas本身屬于DOM對(duì)象，我們可以在其上注冊(cè)各類(lèi)事件，然后在事件處理函數(shù)中模擬畫(huà)布內(nèi)組件的事件機(jī)制。對(duì)于畫(huà)布內(nèi)的所有批注信息，都以一個(gè)組件表示，組件包括該批注的長(zhǎng)寬以及坐標(biāo)屬性。使用這些屬性，可以判斷當(dāng)前鼠標(biāo)指針位于哪一些組件之內(nèi)，從而模擬Javscript的事件機(jī)制，模擬事件機(jī)制如圖1所示。在實(shí)現(xiàn)時(shí)可以對(duì)組件樹(shù)進(jìn)行后序遍歷找出被觸發(fā)的組件，即后添加的子組件處于上層，當(dāng)多個(gè)子組件符合條件時(shí)，優(yōu)先選擇最上層的組件。由于畫(huà)布的遮擋作用，如果觸發(fā)了內(nèi)層的組件，外層組件一般不觸發(fā)，如在當(dāng)前整個(gè)畫(huà)布處于手寫(xiě)模擬狀態(tài)下，選擇了文本組件，則只能移動(dòng)文本組件，不能同時(shí)進(jìn)行手寫(xiě)批注。所以最里層的組件后向外（上）冒泡，外層組件的事件處理函數(shù)實(shí)際上會(huì)馬上返回。

實(shí)際實(shí)現(xiàn)時(shí)，還需要配合各種實(shí)際環(huán)境進(jìn)行優(yōu)化，如判斷組件是否處于激活狀態(tài)以便接收鍵盤(pán)事件。當(dāng)鼠標(biāo)按下時(shí)，還需要鎖定被觸發(fā)的組件只能是當(dāng)前被按下的組件。否則在移動(dòng)或縮放組件時(shí)，若鼠標(biāo)移動(dòng)過(guò)快離開(kāi)組件范圍，將會(huì)出現(xiàn)不可預(yù)測(cè)的結(jié)果。此外需要結(jié)合Javascript的call或apply函數(shù)模擬事件處理函數(shù)內(nèi)部的this指針等機(jī)制。

擁有事件處理機(jī)制，所有的功能都將由對(duì)應(yīng)的組件自身實(shí)現(xiàn)，添加相應(yīng)的鼠標(biāo)或鍵盤(pán)事件，極大地提高了程序的開(kāi)發(fā)效率。

3.局部刷新和緩沖機(jī)制

由于Canvas畫(huà)布是逐像素進(jìn)行渲染，如果每次都重新繪制畫(huà)布內(nèi)的組件，刷新頻率過(guò)高將極大地增加瀏覽的負(fù)擔(dān)，過(guò)低將嚴(yán)重影響用戶(hù)體驗(yàn)。在Canvas中，每個(gè)像素占用4個(gè)字節(jié)空間，遍歷時(shí)間復(fù)雜度為O（n2）。如將普通的電子文檔轉(zhuǎn)換為圖片后，單頁(yè)尺寸一般是595×842像素，如果按每秒10幀計(jì)算，將會(huì)占用極大的瀏覽器資源。因此需要判斷組件是否處于改變狀態(tài)，如果狀態(tài)不變則不重繪畫(huà)布。但當(dāng)組件過(guò)多，并且進(jìn)行移動(dòng)或縮放組件時(shí)，重繪畫(huà)布效率會(huì)更低而頻率會(huì)更高，因此，需要進(jìn)行局部刷新或采用預(yù)先繪制的機(jī)制來(lái)優(yōu)化效率。

針對(duì)當(dāng)前激活文本、矩形、圓圈等組件，由于其處于整個(gè)畫(huà)布之上，是最后被繪制到畫(huà)布之上的，不管其如何被改變，背景都是不變的，因此可以保存背景提高繪制效率。不過(guò)畫(huà)布尺寸較大，此方式仍舊會(huì)消耗一些資源。本文的優(yōu)化策略是在激活組件繪制前，計(jì)算它的尺寸和位置，保存所相對(duì)應(yīng)的部分背景區(qū)域。每一次改變組件時(shí)，只有先將原先所占用的部分背景區(qū)域還原，再進(jìn)行組件繪制，才便于提高繪制效率。

對(duì)于手寫(xiě)組件，由于其覆蓋整個(gè)背景區(qū)域，每一次繪制需要遍歷整個(gè)背景區(qū)域，按上述方式繪制的效率不高。因此優(yōu)化策略是將整個(gè)背景按網(wǎng)格劃分成為一個(gè)個(gè)尺寸較小的塊區(qū)域，重繪時(shí)只需要繪制其覆蓋的塊區(qū)域就好了。本系統(tǒng)還將智能計(jì)算改變的塊區(qū)域，每次繪制最多只需要繪制4個(gè)塊區(qū)域。優(yōu)化后的方法在手寫(xiě)批注占用頁(yè)面區(qū)域較多時(shí)，效率仍舊較低，本系統(tǒng)還使用離屏畫(huà)布技術(shù)[3]，對(duì)手寫(xiě)批注信息進(jìn)行預(yù)先繪制。

如下頁(yè)圖2所示的三層架構(gòu)，首先可假定電子文檔的原始內(nèi)容是不可變的，即背景不可變，那么將背景層和組件層分離，背景層使用普通DIV即可，可以在一定程度上提高效率。其次手寫(xiě)批注組件與其他組件（文本、形狀）不同，本系統(tǒng)亦將其作為獨(dú)立一層，直接使用上述的離屏畫(huà)布作為中間層，將離屏變?yōu)椴浑x屏。手寫(xiě)層由于不包括背景信息和其他組件，刷新時(shí)永遠(yuǎn)不需要重繪。添加或擦除手寫(xiě)批注，可以直接繪制在上面。

對(duì)于多頁(yè)文檔，采用IFrame包含進(jìn)來(lái)，模擬滾動(dòng)效果。從效率上考慮，本系統(tǒng)采用緩沖機(jī)制，并不會(huì)一次性加載所有的頁(yè)面，每一次只加載當(dāng)前頁(yè)以及上下鄰近兩頁(yè)。

4.其他

為了優(yōu)化存儲(chǔ)空間，對(duì)手寫(xiě)批注信息按塊區(qū)域儲(chǔ)存，沒(méi)有被繪制的區(qū)域不保存信息，并且使用位操作將一個(gè)像素由4個(gè)字節(jié)表示降低到一個(gè)位表示，存儲(chǔ)空間縮小為原先的三十二分之一。

批注痕跡的保存使用序列化技術(shù)，所有的組件都支持序列化和反序列化功能，序列化可以將組件轉(zhuǎn)換為字符串，反序列化可以將字符串轉(zhuǎn)換為組件。序列化主要采用JSON格式，對(duì)于字節(jié)數(shù)組則將其先轉(zhuǎn)換為Base64字符串格式。

在服務(wù)器端，支持將原始文檔和批注痕跡合成為新的電子文檔。為了防止矢量圖形轉(zhuǎn)換為圖像后失真，除開(kāi)手寫(xiě)批注外，本系統(tǒng)并不是簡(jiǎn)單地將Canvas畫(huà)布的圖像截下作為水印添加到原始文檔上去，而是在服務(wù)端進(jìn)行反序列化，調(diào)用相應(yīng)的類(lèi)庫(kù)進(jìn)行矢量繪制。手寫(xiě)批注的圖像質(zhì)量也在服務(wù)端進(jìn)行了相應(yīng)的抗鋸齒等優(yōu)化。

● 功能實(shí)現(xiàn)

如圖3所示，該電子文檔在線批注系統(tǒng)實(shí)現(xiàn)了PDF報(bào)告在線批注的功能，其他格式的電子文檔只需要在轉(zhuǎn)換背景和合成新文檔這兩個(gè)步驟中，使用相應(yīng)的開(kāi)源類(lèi)庫(kù)進(jìn)行處理即可。系統(tǒng)提供畫(huà)筆功能，可以進(jìn)行手寫(xiě)的批注功能，能夠?qū)崿F(xiàn)擦除的橡皮擦功能。并且提供了文字批注和矢量圖形批等功能，可以撰寫(xiě)修改意見(jiàn)以及評(píng)語(yǔ)等。文本組件和矢量圖形組件支持移動(dòng)、縮放和編輯功能，基本滿(mǎn)足了用戶(hù)對(duì)在線文檔進(jìn)行批注的需求。

系統(tǒng)提供保存功能，可以將批改痕跡上傳到服務(wù)器端，重載時(shí)可以恢復(fù)上一次批注的結(jié)果。也可以在服務(wù)端對(duì)原始文檔和批注進(jìn)行合成，并將文本、矢量組件轉(zhuǎn)換為電子文檔相應(yīng)格式的矩形圖形，保證電子文本的生成質(zhì)量。此外可以保留歷史的文本輸入信息，避免了多次輸入同樣的信息。這對(duì)于批量修改作業(yè)，將極大地提高評(píng)改的效率，因?yàn)閷W(xué)生所犯的錯(cuò)誤一般可以歸為幾大相似的類(lèi)別。

● 結(jié)語(yǔ)

本文探討了基于Canvas畫(huà)布的事件機(jī)制的模擬實(shí)現(xiàn)以及背景局部刷新等技術(shù)，利用新一代HTML5技術(shù)，不需要借助第三方插件實(shí)現(xiàn)在瀏覽器進(jìn)行電子文檔在線評(píng)閱和手寫(xiě)批注功能，并對(duì)各種情況或細(xì)節(jié)進(jìn)行深度的優(yōu)化。本系統(tǒng)已經(jīng)集成于在線學(xué)習(xí)系統(tǒng)Sakai平臺(tái)之上，大大提高了學(xué)生作業(yè)的在線批閱效率，改進(jìn)了教師的用戶(hù)體驗(yàn)。本文未支持的批注組件，如帶有箭頭指向的文本框等，結(jié)合本文所探討的機(jī)制可以很容易進(jìn)行擴(kuò)展，未來(lái)將對(duì)電子文檔的批注功能作進(jìn)一步的完善和改進(jìn)。

參考文獻(xiàn)：

[1]王立新，趙元慶.網(wǎng)絡(luò)編務(wù)系統(tǒng)中在線手寫(xiě)批注功能的設(shè)計(jì)與應(yīng)用[J].河南大學(xué)學(xué)報(bào)（自然科學(xué)版），2010（04）：420-422.

[2]（美）Shelley Powers著.JavaScript核心技術(shù)[M].北京：機(jī)械工業(yè)出版社，2007.

[3]（美）基瑞著.HTML5 Canvas核心技術(shù)：圖形、動(dòng)畫(huà)與游戲開(kāi)發(fā)[M].北京：機(jī)械工業(yè)出版社，2013.