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

蔡向高 劉華泓

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

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

中圖分類號：TP311.52 ? 文獻標識碼：A ? 論文編號：1674-2117（2015）09-0073-03

● 引言

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

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

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

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

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

1.HTML5 Canvas

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

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

在HTML5中，與Canvas類似的標簽還有SVG。與Canvas逐像素進行渲染的機制不同，SVG是基于XML標記語言描述的2D矢量圖形語言，不依賴于分辨率并且支持事件處理機制，但對于游戲等圖像密集的應用它并不適合。

由于手寫批注的表現(xiàn)形式很難使用矢量語言進行描述，而且過于復雜或過多的描述語言會導致SVG效率下降，因此本文使用Canvas作為在線批注的實現(xiàn)基礎。

2.事件機制

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

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

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

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

擁有事件處理機制，所有的功能都將由對應的組件自身實現(xiàn)，添加相應的鼠標或鍵盤事件，極大地提高了程序的開發(fā)效率。

3.局部刷新和緩沖機制

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

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

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

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

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

4.其他

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

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

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

● 功能實現(xiàn)

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

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

● 結(jié)語

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

參考文獻：

[1]王立新，趙元慶.網(wǎng)絡編務系統(tǒng)中在線手寫批注功能的設計與應用[J].河南大學學報（自然科學版），2010（04）：420-422.

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

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