利用HTML5標準集成的WebSocket和Canvas協議在網頁進行事件交互、主客戶端雙向通信、圖形圖像繪制, 結合VTK三維可視化工具包, 研究在純凈Web中進行遠程醫學影像重建和交互的可行性并進行實驗。提出以服務器為中心的建模思想, 使大數據無需下載至客戶端建模, 避免了客戶端因三維渲染而產生的硬件配置和初始網絡傳輸壓力, 實現了遠程醫學影像三維重建交互與Web的無縫集成, 并可適用于低配置計算機和移動設備。最后使用一組DICOM影像對該方法在因特網中進行測試, 達到實時效果, 這種能夠跨越上網終端和設備性能限制的Web三維可視交流系統在醫學遠程輔助上具有較大意義。
引用本文： 高鵬, 劉鵬, 蘇紅森, 喬梁. 基于HTML5與可視化工具包的醫學影像三維重建及交互方法研究. 生物醫學工程學雜志, 2015, 32(2): 336-342. doi: 10.7507/1001-5515.20150062 復制
引言
通過醫學影像三維重建可直觀地查看人體器官結構，極大地方便了醫學診斷、手術設計等工作。目前，國內外臨床診斷主要利用商品化的三維醫學軟件系統作為實施平臺，如Mimics、3D Doctor等，可視化效果雖好卻無網絡協同功能，且要求單機硬件高配置，限定了醫生工作地域。為適應網絡化發展趨勢，一些醫療或研究機構利用可視化工具包(Visualization ToolKit, VTK)等可視化開發工具自主研發了一些協同可視化系統以應用于遠程交流。但大多存在著醫學斷層影像集數據傳輸量大、客戶端計算機硬件要求高[1]、操作系統/硬件設備不兼容等問題。
隨著智能手機、平板電腦、個人計算機的普及，人們可以隨時隨地連接互聯網并能通過Web便捷地訪問各種網絡資源。目前計算機和移動設備所使用的操作系統呈現出多樣化趨勢，如Windows、Linux、macOS、Android、IOS、Windows Phone等，桌面軟件設計必需充分考慮這些系統的差異，從而使開發能適應各種平臺的桌面應用變得十分困難，也給使用者安裝設置帶來不便，而目前的三維醫學軟件系統都存在這個問題。因此，在Web中進行醫學影像三維重建及交互可以極大方便醫生協同工作及教學研討，降低應用成本。然而，由于異步通信、磁盤讀寫安全、網頁承載能力的限制，基于Web平臺免安裝任何軟件或插件的三維醫學影像交流系統還比較少。隨著超文本標記語言5(HyperText Markup Language 5，HTML5)標準的到來，Web開發將解決高效異步通信(WebSocket)和復雜圖形繪制(Canvas)兩大難題，基于HTML5開發的Web應用可以在各種操作系統上的不同瀏覽器中運行[2]。
本文采用最新的Web技術HTML5，設計了一種非對稱的可視化數據處理與交互模式(以Web服務器為數據處理中心)，在解決Web主客戶端間高效異步通信問題的同時，避免了網頁客戶端大數據下載與本地建模問題，實現醫學影像三維重建交互與Web的無縫集成，并適用于低配置的計算機和移動設備。
1 概述
1.1 HTML5簡介
HTML是一種構建和展示萬維網(World Wide Web)內容的標記語言，也是互聯網的核心技術，HTML5目前為萬維網聯盟(World Wide Web Consortium，W3C)候選推薦標準[3]。目前大部分主流瀏覽器已經支持HTML5標準，使用HTML5開發的應用也在不斷增多。其中，WebSocket和Canvas兩項集成服務使得傳統的瀏覽器/服務器(Browser/Server，B/S)結構中的主客戶交互性能和客戶端網頁表達能力有較大提升。
1.1.1 WebSocket
WebSocket是HTML5新引入的技術，提供了在單傳輸控制協議(Transmission Control Protocol，TCP)連接中進行全雙工通信，實現與桌面應用套接字(Socket)類似功能，在2011年被互聯網工程任務組(Internet Engineering Task Force，IETF)標準化為請求注解(Request for Comments，RFC)6455。它是一個獨立的基于TCP的協議，與超文本傳輸協議(Hypertext Transfer Protocol，HTTP)的唯一聯系是握手請求被HTTP服務器解釋為升級請求(Upgrade)。WebSocket使得在瀏覽器中實時交互成為可能，提升了Web應用的實時性。協議主要由兩個部分組成：握手和數據傳輸[4]。握手過程中的關鍵問題是服務器端計算Sec-WebSocket-Accept值，其過程圖 1所示。
圖1
Sec-WebSocket-Accept生成算法
Figure1.
Sec-WebSocket-Accept generation algorithm
此技術較好地解決了一直以來網頁與服務器之間僅為單純的HTTP通訊模式，給予了B/S結構更好的通訊與實時響應效率。
1.1.2 Canvas
Canvas元素是HTML5標準的一部分，允許動態腳本渲染2D圖形和位圖圖像。HTML5提供了一系列操作Canvas的Javascript應用程序編程接口(application programming interface, API)，可以方便地進行圖形圖像繪制[5]。通過Javascript API可以在Web頁面中對圖像進行像素級操作，結合HTML事件處理，可以方便地對后臺返回的圖片進行顯示、處理及捕獲交互事件。
1.2 Data URI Scheme
Data URI Scheme是一種在網頁中嵌入內聯數據的統一資源標識符(Uniform Resource Identifier，URI)方案。這種方式允許網頁中的各個元素在單個HTTP請求中獲得[6]，其使用也十分簡單，在內嵌圖像數據時只需將頁面圖像元素的數據源指向Data URI Scheme，例如：＜img src=“data:image/png; base64, 圖像數據編碼”/＞，其中圖像數據編碼為base64編碼, 即將圖像數據轉換成標準美國信息交換標準碼(American Standard Code for Information Interchange，ASCII)字符。本方法中，將通過WebSocket接收到的base64編碼圖像數據利用Data URI Scheme轉換為Javascript圖像對象，然后繪制在Canvas上或進行其他處理。
1.3 JSON
對象表示法(JavaScript Object Notation, JSON)是一種輕量級的數據交換格式，以文字為基礎，且易于讓人閱讀，也易于機器解析和生成[7]，簡潔易用，跨平臺、語言性能良好，因此將其作為本方法傳輸時采用的數據封裝方式。JSON的基本結構是“名稱/值”，基本語法：{“name”: value}，其中value可以是數字、字符串、對象、數組等。
1.4 VTK醫學影像可視化軟件包
醫學圖像的三維可視化方法主要為面繪制(Surface Rendering)和體繪制(Volume Rendering)兩種方法。主要是對計算機斷層掃描(computed tomography，CT)、磁共振成像(magnetic resonance imaging，MRI)等醫學設備產生的斷層影像序列進行操作。VTK在此方面有著較為成熟的應用優勢，它是基于開放式圖形庫(open graphic library, OpenGL)的面向對象的跨平臺可視化開發類庫，支持標量、矢量、張量、紋理和體繪制等可視化算法及隱式建模、多邊形削減、網格平滑、切削、等高線、Delaunay三角化等高級建模技術[8]。目前在生物醫學領域應用十分廣泛，特別是在包括CT、MRI等醫學影像數據的可視化方面，支持當前醫學影像領域廣泛使用的醫學數字成像和通信(Digital Imaging and Communications in Medicine，DICOM)影像標準，可以讀取單張DICOM圖像，也可以讀取一個序列的DICOM數據進行三維重建并且提供了一系列交互接口。
針對醫學影像常用面繪制與體繪制兩種三維重建方法，在VTK中都提供了實現途徑。VTK中面繪制先讀取DICOM序列，然后利用Marching Cube算法提取出等值面信息，計算出其法向量后將數據放入映射器，最后添加到角色中并進行渲染。VTK中體繪制可使用光線法，讀取出DICOM序列后，將數據放入光線投照映射器中并為映射器設置光線投照函數，最后再添加到體數據角色中，設置相應的顏色、透明度、梯度透明度等屬性之后進行渲染[9]。
本文目的是實現基于純凈Web的三維重建與可視化交互，因此，對于面繪制和體繪制均預留接口，用戶可以在網頁終端自由選擇重建方式。
2 HTML5醫學影像可視化方法實現
2.1 基于HTML5與VTK醫學影像三維重建及交互的流程
由于醫學影像數據量較大以及三維重建對計算機硬件要求較高，不適于將數據傳輸到本地進行三維重建，因此采用B/S架構，即在服務器端進行醫學影像的三維重建及交互處理，并投影為二維圖片后發送到客戶端顯示，客戶端可在此二維圖片上做進一步的交互操作請求(如旋轉、翻轉等)，等待服務器端的下一步處理結果回饋[10]。此策略下，客戶端僅作為請求發送與結果顯示的窗口，周而復始，從而實現一種真實三維觀感的偽三維交互模式。此過程中，一個重要問題就是如何在未安裝任何定制軟件的客戶端下，利用純凈網頁對偽三維圖像進行桌面效果的交互式操作與事件參數捕捉，而HTML5中的Canvas元素較好地解決了這一問題。這一流程中，交互結果為二維圖像格式，其大小與服務器渲染窗口的尺寸相關，若窗口太大則產生的圖像也隨之增大，不利于網絡傳輸，因此應根據網絡狀況、數據對象原始分辨率情況、臨床醫生的實際需求等對設備渲染窗口的尺寸進行自主調整。一般而言，渲染窗口尺寸應與與繪制圖像大小相同，避免縮放造成的圖像質量損失。本文中所使用的Canvas窗口布局的圖像分辨率默認為512×512，在繪制時也可根據需要動態設置繪制圖像的尺寸，并將尺寸數據封裝在重建請求參數中發送至服務器，間接在服務器上設置渲染窗口尺寸。
當進行醫學影像重建交互時，醫學影像集中存放在服務器上，重建及交互只需傳輸相應參數至服務器和渲染處理后的結果，無需將整個序列醫學影像傳輸到本地，從而避免因原始數據的傳送占用大量的網絡資源、花費大量的時間，即通過多次小數據量偽三維圖像(投影后的二維結果圖)傳輸代替一次大數據量醫學影像(原始數據集)的傳輸，同時，也避免了客戶端本地三維重建及渲染，減輕本地計算機性能的特定要求。
目前，研究所使用的醫學影像數據可以來自CT、MRI、正電子發射計算機斷層掃描(positron emission tomography，PET)等影像設備，只要數據格式為DICOM即可，在重建交互時影響處理速度的因素主要為數據集的大小。頁面產生的重建及交互事件參數(包括數據集名稱、繪制方式、交互參數等)以及渲染處理結果均使用輕量級數據封裝格式JSON進行傳輸(主客戶端間交互流程見圖 2)。
圖2
B/S交互流程
Figure2.
B/S interaction flow
2.2 基于HTML5與VTK醫學影像三維重建及交互的實現過程
本方法實現過程如圖 3所示。服務器建立服務Socket偵聽指定端口并處理接收到的數據。數據封裝采用JSON，通過解析JSON數據得到請求類型，然后根據相應請求類型及參數進行重建或交互，請求類型有Rotate、Zoom、DataSet、VisualMethod、Message，相應參數為旋轉的向量值、放大或縮小、數據集名稱、重建方法、消息等，這些參數根據實際應用的需要可進行擴展。
圖3
實現過程
Figure3.
Implementation flow
請求數據的JSON封裝：
{
"Type": 3,
"EventType": "type",
"EventParams": {
"Rotate": true,
"VisualMethod": "surface",
……//此處可根據需要添加相應參數
}
}
(1)客戶端發起請求建立連接：
var socket=new WebSocket(“ws://192.168.1.13:5001/visulization”);
服務器解析請求，正確完成握手后建立與客戶端的連接。然后客戶端即可發送重建請求，服務器根據客戶端提供的數據集名稱和重建方法在服務器上讀取相應DICOM序列進行面繪制或體繪制。服務器完成重建后客戶端即可進行交互，客戶端參數是由頁面中Canvas上的鼠標事件或觸摸事件產生，包括滾輪方向、鼠標位置或觸點數量、位置等。在Firefox中捕獲事件方法如下。
(2)首先判斷是移動端瀏覽器還是桌面瀏覽器：
var u=navigator.userAgent;
if(!!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/)){//do something}
(3)然后獲取Canvas對象，根據所使的用設備類型給Canvas綁定相應事件。
移動平臺：
canvas.addEventListener("touchstart", onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
canvas.addEventListener('touchend', onTouchEnd, false);
桌面平臺：
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('DOMMouseScroll', onMouseWheel, false);
桌面平臺處理鼠標事件相對簡單。對于移動平臺，處理Touch事件首先判斷觸點的數量，若為1個觸點，那么視為轉動模型事件，返回觸點移動方向向量；若觸點數量為2個以上，那么視為對模型進行縮放事件，每次計算即得到可兩個觸點間距離并與上一次距離相比較，這樣就可以判斷放大或縮小[11]。
獲取觸點數量方法：event.touches.length
獲取觸點發生位置：var x=event.touches[0].pageX; var y=event.touches[0].pageY;
(4)服務器根據事件參數調整渲染窗口中的Camera，從而實現旋轉和縮放模型。交互完成后，渲染窗口以PNG(Portable Network Graphic Format，便攜式網絡圖形)格式寫入內存。PNG格式圖像可以無失真地保存渲染窗口畫面，這在醫療方面是至關重要的，因為一點細節的損失將可能會產生誤診。
vtkPNGWriter pngWriter=new vtkPNGWriter();
pngWriter.WriteToMemoryOn();
vtkWindowToImageFilter w2i=new vtkWindowToImageFilter();
w2i.SetInput(renderWindow);
pngWriter.SetInput(w2i.GetOutput());
pngWriter.Write();
vtkUnsignedCharArray resultImg=pngWriter.GetResult();
vtkPNGWriter寫到內存中的PNG圖像存儲在vtkUnsignedCharArray對象中，且已對圖像進行PNG壓縮。為便于WebSocket傳輸，需將其轉換為字節數據組成的字符串(分辨率為512×512的投影圖像經過PNG壓縮和base64編碼后，實際數據量在85 000字節左右)，然后將圖像字節數據字符串封裝到數據對象中，以JSON格式串行化，再根據WebSocket協議中數據傳輸規定將串行化的數據包傳輸至客戶端，最后，客戶端結合Data URI Scheme在Canvas中將其繪制出來，最終完成整個交互過程。為了減小服務器處理負擔與交互數據量，在結果繪制完成并反饋交互結果后才能發送下一個交互請求。
(5)發送交互請求：
if(isDrawDone){
????var data={ Type: 3, EventType: type, EventParams:params };
????Client.Send(data);
????isDrawDone=false;
}
(6)數據對象有DataType(數據類型)和Data(數據)兩個屬性，客戶端根據DataType處理Data，當DataType為Image時繪制服務器返回的交互結果，該數據對象也可根據需要擴展。首先，在Browser中創建一個Image對象，然后指定其圖像源為服務返回的圖像數據，最后調用Canvas Javascript API將該Image對象繪制在Canvas中。
var imgData=“data:image/png; base64, ”+data.Data; //data.Data為base64編碼的圖像數據
var resultImage=new Image();
resultImage.src=imgData;
resultImage.onload=function(){
????renderWin.drawImage(resultImage, 0, 0);
????isDrawDone=true;
}
3 測試與結果
測試服務器CPU為intel(R) Core(tm) i3 3220，顯卡為AMD Radeon 7000 1GB，內存為4 GB，操作系統為Win7 32位，所使用的VTK版本為ActiViz.NET 5.8.0開源版。對于客戶端，桌面平臺CPU為Intel T6400，內存2 GB，集成顯卡，操作系統為Ubantu12.04LTS，瀏覽器為Firefox；移動平臺為小米2S 32 G版，瀏覽器為Chrome Android版。網絡為廣西桂林電信8 Mbps帶寬ADSL家庭撥號網絡。DICOM數據為腹部CT序列，共189張，每張512×512像素，占用96.2 MB存儲空間，來自解放軍第181醫院信息科。考慮到體繪制交互時計算量較大而測試計算機只是普通辦公電腦，所需處理時間長，所以采用面繪制方法進行測試。實際應用時，選作服務器的計算機圖形圖像處理能力應較強，可采用體繪制方法。測試效果如圖 4所示。
圖4
測試結果
(a)服務器運行效果；(b)使用Ubuntu12.04 LTS Firefox客戶端效果；(c)小米手機上客戶端的效果；(d)利用Firefox元素分析工具分析截圖
Figure4. Test results(a) the result on Server; (b) the result on Ubuntu12.04 LTS Firefox; (c) the result on MI phone; (d) firefox element analysis tool snapshot
在操作系統為Ubuntu12.04 LTS的PC上利用Firefox頁面元素分析工具得到了處理各交互過程的時間及傳輸圖像大小。服務器渲染窗口尺寸分辨率為512×512，每次交互結果導出尺寸也為512×512像素大小的PNG圖像。
分析性能時，隨機選取測試中66次交互過程，每次數據網絡傳輸平均時間為105.5 ms，每次繪制圖像數據平均時間為35.8 ms，完成一次交互平均時間為141.3 ms，其中完成一次交互所用時間=數據網絡傳輸時間+繪制數據時間(網絡數據傳輸包括請求數據和返回圖像數據，請求數據大小、時間可忽略), 每次傳輸圖像數據平均大小約為82.17 KB。由于在交互時，渲染的內容會發生變化，從而寫出PNG圖像的細節也會變化，因此交互過程中圖像數據的大小會有波動，在此取圖像數據大小平均值。此方式無需將醫學影像數據下載到本地重建，亦無需考慮客戶端三維渲染硬件承受能力，從分析結果表明本方法效果比較理想。
4 討論
Web中實現醫學影像三維可視化比較困難，主要是由于醫學影像數據量大、可視化要求高，而瀏覽器數據處理和運算承載能力有限以及磁盤讀寫有安全限制等。目前，Web3D處理常見的方式有三種：①使用Applet插件實現醫學影像可視化及交互[12]，Applet是Java開發的嵌入在網頁中的小程序，需要用戶安裝Java虛擬機，并且需要瀏覽器及操作系統平臺的支持，不適合大數據量圖形圖像處理。②隨著HTML5標準的出現，開始使用WebGL[13]在瀏覽器中實現醫學影像體繪制算法[14]，這種方法對本地計算機圖形圖像處理能力要求高，瀏覽器性能要求也高。③采用遠程建立模型，再將模型傳輸到瀏覽器，利用虛擬現實建模語言(Virtual Reality Modeling Language，VRML)、可擴展三維語言(Extensible 3D，X3D)等插件進行可視化及交互[15]。這些方法對數據的處理都是在客戶端本地進行，當前的網絡狀況下傳輸醫學影像需要較長時間，同時，它們對用戶計算機硬件配置存在較高要求。此外，還一種方式就是本文所采用的遠程渲染方法，服務器存儲和處理醫學影像，客戶端只用于產生事件和顯示結果，這種方式客戶端可采用Applet、Flash等插件，但各大瀏覽器對這些插件支持情況不一，使用不方便，更談不上在移動設備使用。本文利用HTML5的特性實現Web醫學影像可視化，醫學影像數據集中管理，將圖形圖像處理負擔集中到服務器，有效減少了對客戶端硬件的要求，日常使用的上網設備即可進行醫學影像可視化，并兼顧了桌面平臺與移動平臺，尤其是在移動設備日益增多的時代，較好地方便了用戶。當然，此方式也不可避免存在Internet中圖像傳輸的限制，當交互所得圖像過大時，交互過程將產生較大延遲，服務器處理過程延遲也將增大。如果服務器采用并行方式進行重建及交互處理，頁面圖像顯示采用漸進式顯示和瓦片顯示技術，那么將有效地減小延遲，交互性能將會有較大提升，當然圖像壓縮和傳輸也是減小延遲的關鍵。
引言
通過醫學影像三維重建可直觀地查看人體器官結構，極大地方便了醫學診斷、手術設計等工作。目前，國內外臨床診斷主要利用商品化的三維醫學軟件系統作為實施平臺，如Mimics、3D Doctor等，可視化效果雖好卻無網絡協同功能，且要求單機硬件高配置，限定了醫生工作地域。為適應網絡化發展趨勢，一些醫療或研究機構利用可視化工具包(Visualization ToolKit, VTK)等可視化開發工具自主研發了一些協同可視化系統以應用于遠程交流。但大多存在著醫學斷層影像集數據傳輸量大、客戶端計算機硬件要求高[1]、操作系統/硬件設備不兼容等問題。
隨著智能手機、平板電腦、個人計算機的普及，人們可以隨時隨地連接互聯網并能通過Web便捷地訪問各種網絡資源。目前計算機和移動設備所使用的操作系統呈現出多樣化趨勢，如Windows、Linux、macOS、Android、IOS、Windows Phone等，桌面軟件設計必需充分考慮這些系統的差異，從而使開發能適應各種平臺的桌面應用變得十分困難，也給使用者安裝設置帶來不便，而目前的三維醫學軟件系統都存在這個問題。因此，在Web中進行醫學影像三維重建及交互可以極大方便醫生協同工作及教學研討，降低應用成本。然而，由于異步通信、磁盤讀寫安全、網頁承載能力的限制，基于Web平臺免安裝任何軟件或插件的三維醫學影像交流系統還比較少。隨著超文本標記語言5(HyperText Markup Language 5，HTML5)標準的到來，Web開發將解決高效異步通信(WebSocket)和復雜圖形繪制(Canvas)兩大難題，基于HTML5開發的Web應用可以在各種操作系統上的不同瀏覽器中運行[2]。
本文采用最新的Web技術HTML5，設計了一種非對稱的可視化數據處理與交互模式(以Web服務器為數據處理中心)，在解決Web主客戶端間高效異步通信問題的同時，避免了網頁客戶端大數據下載與本地建模問題，實現醫學影像三維重建交互與Web的無縫集成，并適用于低配置的計算機和移動設備。
1 概述
1.1 HTML5簡介
HTML是一種構建和展示萬維網(World Wide Web)內容的標記語言，也是互聯網的核心技術，HTML5目前為萬維網聯盟(World Wide Web Consortium，W3C)候選推薦標準[3]。目前大部分主流瀏覽器已經支持HTML5標準，使用HTML5開發的應用也在不斷增多。其中，WebSocket和Canvas兩項集成服務使得傳統的瀏覽器/服務器(Browser/Server，B/S)結構中的主客戶交互性能和客戶端網頁表達能力有較大提升。
1.1.1 WebSocket
WebSocket是HTML5新引入的技術，提供了在單傳輸控制協議(Transmission Control Protocol，TCP)連接中進行全雙工通信，實現與桌面應用套接字(Socket)類似功能，在2011年被互聯網工程任務組(Internet Engineering Task Force，IETF)標準化為請求注解(Request for Comments，RFC)6455。它是一個獨立的基于TCP的協議，與超文本傳輸協議(Hypertext Transfer Protocol，HTTP)的唯一聯系是握手請求被HTTP服務器解釋為升級請求(Upgrade)。WebSocket使得在瀏覽器中實時交互成為可能，提升了Web應用的實時性。協議主要由兩個部分組成：握手和數據傳輸[4]。握手過程中的關鍵問題是服務器端計算Sec-WebSocket-Accept值，其過程圖 1所示。
圖1
Sec-WebSocket-Accept生成算法
Figure1.
Sec-WebSocket-Accept generation algorithm
此技術較好地解決了一直以來網頁與服務器之間僅為單純的HTTP通訊模式，給予了B/S結構更好的通訊與實時響應效率。
1.1.2 Canvas
Canvas元素是HTML5標準的一部分，允許動態腳本渲染2D圖形和位圖圖像。HTML5提供了一系列操作Canvas的Javascript應用程序編程接口(application programming interface, API)，可以方便地進行圖形圖像繪制[5]。通過Javascript API可以在Web頁面中對圖像進行像素級操作，結合HTML事件處理，可以方便地對后臺返回的圖片進行顯示、處理及捕獲交互事件。
1.2 Data URI Scheme
Data URI Scheme是一種在網頁中嵌入內聯數據的統一資源標識符(Uniform Resource Identifier，URI)方案。這種方式允許網頁中的各個元素在單個HTTP請求中獲得[6]，其使用也十分簡單，在內嵌圖像數據時只需將頁面圖像元素的數據源指向Data URI Scheme，例如：＜img src=“data:image/png; base64, 圖像數據編碼”/＞，其中圖像數據編碼為base64編碼, 即將圖像數據轉換成標準美國信息交換標準碼(American Standard Code for Information Interchange，ASCII)字符。本方法中，將通過WebSocket接收到的base64編碼圖像數據利用Data URI Scheme轉換為Javascript圖像對象，然后繪制在Canvas上或進行其他處理。
1.3 JSON
對象表示法(JavaScript Object Notation, JSON)是一種輕量級的數據交換格式，以文字為基礎，且易于讓人閱讀，也易于機器解析和生成[7]，簡潔易用，跨平臺、語言性能良好，因此將其作為本方法傳輸時采用的數據封裝方式。JSON的基本結構是“名稱/值”，基本語法：{“name”: value}，其中value可以是數字、字符串、對象、數組等。
1.4 VTK醫學影像可視化軟件包
醫學圖像的三維可視化方法主要為面繪制(Surface Rendering)和體繪制(Volume Rendering)兩種方法。主要是對計算機斷層掃描(computed tomography，CT)、磁共振成像(magnetic resonance imaging，MRI)等醫學設備產生的斷層影像序列進行操作。VTK在此方面有著較為成熟的應用優勢，它是基于開放式圖形庫(open graphic library, OpenGL)的面向對象的跨平臺可視化開發類庫，支持標量、矢量、張量、紋理和體繪制等可視化算法及隱式建模、多邊形削減、網格平滑、切削、等高線、Delaunay三角化等高級建模技術[8]。目前在生物醫學領域應用十分廣泛，特別是在包括CT、MRI等醫學影像數據的可視化方面，支持當前醫學影像領域廣泛使用的醫學數字成像和通信(Digital Imaging and Communications in Medicine，DICOM)影像標準，可以讀取單張DICOM圖像，也可以讀取一個序列的DICOM數據進行三維重建并且提供了一系列交互接口。
針對醫學影像常用面繪制與體繪制兩種三維重建方法，在VTK中都提供了實現途徑。VTK中面繪制先讀取DICOM序列，然后利用Marching Cube算法提取出等值面信息，計算出其法向量后將數據放入映射器，最后添加到角色中并進行渲染。VTK中體繪制可使用光線法，讀取出DICOM序列后，將數據放入光線投照映射器中并為映射器設置光線投照函數，最后再添加到體數據角色中，設置相應的顏色、透明度、梯度透明度等屬性之后進行渲染[9]。
本文目的是實現基于純凈Web的三維重建與可視化交互，因此，對于面繪制和體繪制均預留接口，用戶可以在網頁終端自由選擇重建方式。
2 HTML5醫學影像可視化方法實現
2.1 基于HTML5與VTK醫學影像三維重建及交互的流程
由于醫學影像數據量較大以及三維重建對計算機硬件要求較高，不適于將數據傳輸到本地進行三維重建，因此采用B/S架構，即在服務器端進行醫學影像的三維重建及交互處理，并投影為二維圖片后發送到客戶端顯示，客戶端可在此二維圖片上做進一步的交互操作請求(如旋轉、翻轉等)，等待服務器端的下一步處理結果回饋[10]。此策略下，客戶端僅作為請求發送與結果顯示的窗口，周而復始，從而實現一種真實三維觀感的偽三維交互模式。此過程中，一個重要問題就是如何在未安裝任何定制軟件的客戶端下，利用純凈網頁對偽三維圖像進行桌面效果的交互式操作與事件參數捕捉，而HTML5中的Canvas元素較好地解決了這一問題。這一流程中，交互結果為二維圖像格式，其大小與服務器渲染窗口的尺寸相關，若窗口太大則產生的圖像也隨之增大，不利于網絡傳輸，因此應根據網絡狀況、數據對象原始分辨率情況、臨床醫生的實際需求等對設備渲染窗口的尺寸進行自主調整。一般而言，渲染窗口尺寸應與與繪制圖像大小相同，避免縮放造成的圖像質量損失。本文中所使用的Canvas窗口布局的圖像分辨率默認為512×512，在繪制時也可根據需要動態設置繪制圖像的尺寸，并將尺寸數據封裝在重建請求參數中發送至服務器，間接在服務器上設置渲染窗口尺寸。
當進行醫學影像重建交互時，醫學影像集中存放在服務器上，重建及交互只需傳輸相應參數至服務器和渲染處理后的結果，無需將整個序列醫學影像傳輸到本地，從而避免因原始數據的傳送占用大量的網絡資源、花費大量的時間，即通過多次小數據量偽三維圖像(投影后的二維結果圖)傳輸代替一次大數據量醫學影像(原始數據集)的傳輸，同時，也避免了客戶端本地三維重建及渲染，減輕本地計算機性能的特定要求。
目前，研究所使用的醫學影像數據可以來自CT、MRI、正電子發射計算機斷層掃描(positron emission tomography，PET)等影像設備，只要數據格式為DICOM即可，在重建交互時影響處理速度的因素主要為數據集的大小。頁面產生的重建及交互事件參數(包括數據集名稱、繪制方式、交互參數等)以及渲染處理結果均使用輕量級數據封裝格式JSON進行傳輸(主客戶端間交互流程見圖 2)。
圖2
B/S交互流程
Figure2.
B/S interaction flow
2.2 基于HTML5與VTK醫學影像三維重建及交互的實現過程
本方法實現過程如圖 3所示。服務器建立服務Socket偵聽指定端口并處理接收到的數據。數據封裝采用JSON，通過解析JSON數據得到請求類型，然后根據相應請求類型及參數進行重建或交互，請求類型有Rotate、Zoom、DataSet、VisualMethod、Message，相應參數為旋轉的向量值、放大或縮小、數據集名稱、重建方法、消息等，這些參數根據實際應用的需要可進行擴展。
圖3
實現過程
Figure3.
Implementation flow
請求數據的JSON封裝：
{
"Type": 3,
"EventType": "type",
"EventParams": {
"Rotate": true,
"VisualMethod": "surface",
……//此處可根據需要添加相應參數
}
}
(1)客戶端發起請求建立連接：
var socket=new WebSocket(“ws://192.168.1.13:5001/visulization”);
服務器解析請求，正確完成握手后建立與客戶端的連接。然后客戶端即可發送重建請求，服務器根據客戶端提供的數據集名稱和重建方法在服務器上讀取相應DICOM序列進行面繪制或體繪制。服務器完成重建后客戶端即可進行交互，客戶端參數是由頁面中Canvas上的鼠標事件或觸摸事件產生，包括滾輪方向、鼠標位置或觸點數量、位置等。在Firefox中捕獲事件方法如下。
(2)首先判斷是移動端瀏覽器還是桌面瀏覽器：
var u=navigator.userAgent;
if(!!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/)){//do something}
(3)然后獲取Canvas對象，根據所使的用設備類型給Canvas綁定相應事件。
移動平臺：
canvas.addEventListener("touchstart", onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
canvas.addEventListener('touchend', onTouchEnd, false);
桌面平臺：
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('DOMMouseScroll', onMouseWheel, false);
桌面平臺處理鼠標事件相對簡單。對于移動平臺，處理Touch事件首先判斷觸點的數量，若為1個觸點，那么視為轉動模型事件，返回觸點移動方向向量；若觸點數量為2個以上，那么視為對模型進行縮放事件，每次計算即得到可兩個觸點間距離并與上一次距離相比較，這樣就可以判斷放大或縮小[11]。
獲取觸點數量方法：event.touches.length
獲取觸點發生位置：var x=event.touches[0].pageX; var y=event.touches[0].pageY;
(4)服務器根據事件參數調整渲染窗口中的Camera，從而實現旋轉和縮放模型。交互完成后，渲染窗口以PNG(Portable Network Graphic Format，便攜式網絡圖形)格式寫入內存。PNG格式圖像可以無失真地保存渲染窗口畫面，這在醫療方面是至關重要的，因為一點細節的損失將可能會產生誤診。
vtkPNGWriter pngWriter=new vtkPNGWriter();
pngWriter.WriteToMemoryOn();
vtkWindowToImageFilter w2i=new vtkWindowToImageFilter();
w2i.SetInput(renderWindow);
pngWriter.SetInput(w2i.GetOutput());
pngWriter.Write();
vtkUnsignedCharArray resultImg=pngWriter.GetResult();
vtkPNGWriter寫到內存中的PNG圖像存儲在vtkUnsignedCharArray對象中，且已對圖像進行PNG壓縮。為便于WebSocket傳輸，需將其轉換為字節數據組成的字符串(分辨率為512×512的投影圖像經過PNG壓縮和base64編碼后，實際數據量在85 000字節左右)，然后將圖像字節數據字符串封裝到數據對象中，以JSON格式串行化，再根據WebSocket協議中數據傳輸規定將串行化的數據包傳輸至客戶端，最后，客戶端結合Data URI Scheme在Canvas中將其繪制出來，最終完成整個交互過程。為了減小服務器處理負擔與交互數據量，在結果繪制完成并反饋交互結果后才能發送下一個交互請求。
(5)發送交互請求：
if(isDrawDone){
????var data={ Type: 3, EventType: type, EventParams:params };
????Client.Send(data);
????isDrawDone=false;
}
(6)數據對象有DataType(數據類型)和Data(數據)兩個屬性，客戶端根據DataType處理Data，當DataType為Image時繪制服務器返回的交互結果，該數據對象也可根據需要擴展。首先，在Browser中創建一個Image對象，然后指定其圖像源為服務返回的圖像數據，最后調用Canvas Javascript API將該Image對象繪制在Canvas中。
var imgData=“data:image/png; base64, ”+data.Data; //data.Data為base64編碼的圖像數據
var resultImage=new Image();
resultImage.src=imgData;
resultImage.onload=function(){
????renderWin.drawImage(resultImage, 0, 0);
????isDrawDone=true;
}
3 測試與結果
測試服務器CPU為intel(R) Core(tm) i3 3220，顯卡為AMD Radeon 7000 1GB，內存為4 GB，操作系統為Win7 32位，所使用的VTK版本為ActiViz.NET 5.8.0開源版。對于客戶端，桌面平臺CPU為Intel T6400，內存2 GB，集成顯卡，操作系統為Ubantu12.04LTS，瀏覽器為Firefox；移動平臺為小米2S 32 G版，瀏覽器為Chrome Android版。網絡為廣西桂林電信8 Mbps帶寬ADSL家庭撥號網絡。DICOM數據為腹部CT序列，共189張，每張512×512像素，占用96.2 MB存儲空間，來自解放軍第181醫院信息科。考慮到體繪制交互時計算量較大而測試計算機只是普通辦公電腦，所需處理時間長，所以采用面繪制方法進行測試。實際應用時，選作服務器的計算機圖形圖像處理能力應較強，可采用體繪制方法。測試效果如圖 4所示。
圖4
測試結果
(a)服務器運行效果；(b)使用Ubuntu12.04 LTS Firefox客戶端效果；(c)小米手機上客戶端的效果；(d)利用Firefox元素分析工具分析截圖
Figure4. Test results(a) the result on Server; (b) the result on Ubuntu12.04 LTS Firefox; (c) the result on MI phone; (d) firefox element analysis tool snapshot
在操作系統為Ubuntu12.04 LTS的PC上利用Firefox頁面元素分析工具得到了處理各交互過程的時間及傳輸圖像大小。服務器渲染窗口尺寸分辨率為512×512，每次交互結果導出尺寸也為512×512像素大小的PNG圖像。
分析性能時，隨機選取測試中66次交互過程，每次數據網絡傳輸平均時間為105.5 ms，每次繪制圖像數據平均時間為35.8 ms，完成一次交互平均時間為141.3 ms，其中完成一次交互所用時間=數據網絡傳輸時間+繪制數據時間(網絡數據傳輸包括請求數據和返回圖像數據，請求數據大小、時間可忽略), 每次傳輸圖像數據平均大小約為82.17 KB。由于在交互時，渲染的內容會發生變化，從而寫出PNG圖像的細節也會變化，因此交互過程中圖像數據的大小會有波動，在此取圖像數據大小平均值。此方式無需將醫學影像數據下載到本地重建，亦無需考慮客戶端三維渲染硬件承受能力，從分析結果表明本方法效果比較理想。
4 討論
Web中實現醫學影像三維可視化比較困難，主要是由于醫學影像數據量大、可視化要求高，而瀏覽器數據處理和運算承載能力有限以及磁盤讀寫有安全限制等。目前，Web3D處理常見的方式有三種：①使用Applet插件實現醫學影像可視化及交互[12]，Applet是Java開發的嵌入在網頁中的小程序，需要用戶安裝Java虛擬機，并且需要瀏覽器及操作系統平臺的支持，不適合大數據量圖形圖像處理。②隨著HTML5標準的出現，開始使用WebGL[13]在瀏覽器中實現醫學影像體繪制算法[14]，這種方法對本地計算機圖形圖像處理能力要求高，瀏覽器性能要求也高。③采用遠程建立模型，再將模型傳輸到瀏覽器，利用虛擬現實建模語言(Virtual Reality Modeling Language，VRML)、可擴展三維語言(Extensible 3D，X3D)等插件進行可視化及交互[15]。這些方法對數據的處理都是在客戶端本地進行，當前的網絡狀況下傳輸醫學影像需要較長時間，同時，它們對用戶計算機硬件配置存在較高要求。此外，還一種方式就是本文所采用的遠程渲染方法，服務器存儲和處理醫學影像，客戶端只用于產生事件和顯示結果，這種方式客戶端可采用Applet、Flash等插件，但各大瀏覽器對這些插件支持情況不一，使用不方便，更談不上在移動設備使用。本文利用HTML5的特性實現Web醫學影像可視化，醫學影像數據集中管理，將圖形圖像處理負擔集中到服務器，有效減少了對客戶端硬件的要求，日常使用的上網設備即可進行醫學影像可視化，并兼顧了桌面平臺與移動平臺，尤其是在移動設備日益增多的時代，較好地方便了用戶。當然，此方式也不可避免存在Internet中圖像傳輸的限制，當交互所得圖像過大時，交互過程將產生較大延遲，服務器處理過程延遲也將增大。如果服務器采用并行方式進行重建及交互處理，頁面圖像顯示采用漸進式顯示和瓦片顯示技術，那么將有效地減小延遲，交互性能將會有較大提升，當然圖像壓縮和傳輸也是減小延遲的關鍵。
