基于HTML5的移動醫學影像可視化系統的研究

汪小鋒，阮增輝，鄭焜

浙江大學醫學院附屬兒童醫院信息科，浙江 杭州 310001

基于HTML5的移動醫學影像可視化系統的研究

汪小鋒，阮增輝，鄭焜

浙江大學醫學院附屬兒童醫院信息科，浙江 杭州 310001

目的基于HTML5和最新的Web技術，實現面向現代瀏覽器的醫學影像可視化系統。方法系統參照傳統的B/S模式進行整體架構設計，采用WebGL對二維醫學影像數據和三維體數據進行繪制。結果系統可運行在不同PC端及移動平臺（手機、平板電腦等）上，支持各類瀏覽器，無需安裝任何插件。結論本系統實現了對病人影像的跨平臺訪問，解決了軟件移植成本過于龐大的問題。

HTML5；可視化系統；移動醫學影像；WebGL

0 前言

醫學影像設備不斷的發展產生了大量醫學影像數據，這些影像所包含的信息在診斷治療中有巨大的價值。醫學影像可視化系統使用計算機和圖像處理技術充分挖掘醫學影像的信息，為醫生診斷、治療、手術等提供有力的支持。

純客戶端的醫學影像數據可視化平臺已經非常成熟，功能也十分完善，商業公司和開源社區都有大量的軟件提供， 如 VolView、Slicer Voreen、Osirin[1]。 基 于 瀏 覽 器 插件或者虛擬化桌面的醫學影像數據可視化平臺也很普遍，主要是由商業公司提供，平臺的發展日趨完善,現已接近純客戶端的功能 ,逐步在替換純客戶端 ,包括高端影像工作站領域。以上介紹的醫學影像可視化平臺依賴于操作系統或者與平臺相關的插件，如果要實現跨平臺訪問，甚至移動設備的訪問，所需要軟件移植成本過于龐大。因此，一些商業公司和開源社區開始探索與平臺無關，純面向瀏覽器的醫學影像數據的可視化平臺，如 Oviyam 已實現了與平臺無關的 Web醫學影像可視化系統。它使用DICOM[2]標準中 WADO 協議傳輸圖像，主要包括一些簡單的二維交互功能。但是 Oviyam 還沒有支持三維影像的繪制，另外基于 WADO 協議的使用也限制了系統提供定制的服務功能。

本文基于 HTML5 和最新的 Web 技術，實現了面向現代瀏覽器的醫學影像可視化系統。系統使用 WebWorkers來異步傳輸圖像，利用 WebGL 對硬件加速的支持在瀏覽器端實時繪制二維和三維影像，并通過自定義的傳輸協議為用戶提供各種定制服務。該系統不依賴于任何插件及平臺，大大提升了用戶體驗，為遠程及移動醫療影像可視化系統開拓了前景[3]。

1 系統分析與設計

1.1 整體設計方案

整個系統的設計思路是按照 B/S 的模式（圖 1）來建立，瀏覽器端與服務端通過 http 協議來進行通信。前端主要運用 HTML5 和 JAVASCIPT 來編寫頁面及相應的交互功能，通過修改 CSS 文件來控制整個頁面的布局。而服務端則是通過各種 cgi程序響應動態服務。

圖1 整體系統設計圖

1.2 圖像信息的搜索

圖像的搜索和訪問是本系統的基礎，同樣是也核心模塊，直接影響二維圖像的交互以及三維影像的顯示。在服務端我們使用了 DCM4CHEE PACS[4]服務器來對 DICOM 圖像進行歸檔處理，對圖像的搜索只需直接對 DCM4CHEE PACS服務器的數據庫服務器進行訪問便可。在本系統服務端安裝的是 Postgresql數據庫[5]。

1.3 圖像數據請求

圖 像 信 息 的 json 數 據 的 傳 輸 部 分 采 用 了 HTML5 中WebWorker實現多線程傳輸，這樣便使得后臺的數據傳輸不會影響到前臺的界面交互。自 javascript誕生以來，還沒有辦法在瀏覽器 UI線程之外運行代碼，隨著 HTML5 中的WebWorker API引入后解決此種狀況。Worker在運行過程中不占用 UI線程的時間，它給 Web 運用帶來潛在的巨大性能提升，因為每個新的 Worker都在各自的線程中運行代碼。這就意味著 Worker運行代碼不僅不會影響瀏覽器 UI，也不會影響其他 Worker中運行的代碼。在 chrome瀏覽器中，同時可以運行 16 個 Worker，但是考慮到交互的流暢度以及系統資源的合理利用，我們在系統中采用的方式是每次接受 1 組圖像，我們都會開啟 2 個主 Worker，它負責順序地發送請求并接受圖像信息，一旦用戶通過鼠標交互選擇到某一張圖片，如果這張圖片信息目前還沒有發送過來，系統便會新開啟一個 Worker來負責這張圖片信息的傳輸，子Worker和主 Worker之間通過互斥操作來防止圖像數據讀寫的沖突。圖像傳輸框架設計，見圖2。

圖2 圖像傳輸框架圖

服務器端使用 dcmtk 開源庫來對 DICOM 圖像進行解析，一旦接受到 Worker發送過來的路徑信息，便找到相應的圖像文件對其解析，通過 json 的數據格式返回給瀏覽器端。瀏覽器端利用 HTML5 中的 Canvas 使用 WebGL 進行繪制。具體流程，見圖3。

圖3 醫學影像數據請求處理流程圖

2 主要實現功能

2.1 二維圖像交互功能

系統二維交互功能模仿了一些流行的客戶端醫學影像平臺（Osirix）來進行設計，主要包括窗寬、窗位的調整，偽彩映射，測量工具以及旋轉、平移、放大縮小等平移變換。在 Webgl中已經提供了對硬件加速的支持，為了使得用戶在交互體驗上盡量沒有延時感，利用 GLSL shader語言來對頂點和片段進行控制，使得繪制效率大大提高。不過由于目前 Webgl的版本與 opengl ES 2.0 相似，里面很多功能還不夠完善，要依賴一些小技巧才得以完成任務。

2.2 窗寬與窗位調整

窗寬與窗位的調整主要是利用捕獲鼠標事件，計算鼠標在垂直和水平方向的位移量來計算響應值的大小，不過在紋理傳輸過程中，我們發現 Webgl不支持浮點型紋理，因此無法把較高精度的紋理傳進 shader之中。面對這個問題，我們認識到雖然 RGBA 每個分量只有8位空間，但是由于所傳輸的醫學影像是灰度圖像，因此可以將RGBA 的32位全部用來存儲灰度值信息，這樣便能用高精度的紋理數據來顯示繪制結果。紋理傳入 shader之后，根據當前窗寬與窗位的大小將其映射到 0～255 顏色值之間，最后通過查找偽彩色表得到顯示在屏幕上的顏色值[6]。

2.3 三維體繪制效果交互顯示

自從一些主流瀏覽器支持 Webgl之后，我們可以利用其對硬件加速的支持來進行三維圖像的實時繪制。 但是由于 Webgl還不支持三維紋理，所以基于三維紋理的光線透射法便無法在瀏覽器上實現。John Congote 等人[7]用基于二維紋理的方法在瀏覽器端實現了光線跟蹤算法，并且在移動平臺上進行了測試。不過我們考慮到現實生活中每一臺移動設備或者客戶端所擁有的硬件條件參差不齊，想要在瀏覽器端完成精確的體繪制效果并不具有普遍適用性，所以我們決定采用“前后開工”的策略。首先在瀏覽器端對原始體數據進行降采樣，用基于二維紋理的光線跟蹤算法來快速繪制它的“模糊”效果，然后通過鼠標設置定時器來傳送相應的繪制矩陣參數給后臺，當接到請求后服務器會調用程序，根據參數讀取存儲在服務器端的體數據并利用服務器強大的圖形硬件快速繪制出精確的體繪制效果，再通過 json 格式傳回給前端進行顯示。三維圖像繪制流程圖，見圖4。

圖4 三維圖像繪制流程圖

2.4 自定義功能模塊

除了一般二維、三維繪制顯示和交互功能之外，系統作為一個基礎醫學影像可視化平臺還提供了對定制功能模塊的擴展。系統的自定義交換格式可根據用戶需求加入指定的相應指令。功能模塊的擴展使得前端只需負責用戶交互及簡單的運算，復雜的計算過程都由服務器來完成。本系統針對活體肝移植手術實現了肝臟血管分割，因為血管與肝臟組織的對比度比較大，系統采用了 RegionGrowing 算法來實現肝臟血管的分割[8]。用戶只要在影像上選擇好區域增長的種子點、設置好閾值并發送指令給服務器，服務器便會根據這些參數計算得到血管數據，最后返回給前端進行顯示。

3 結語

此系統作為基礎醫學影像可視化平臺，可以根據用戶不同的需求來定制相應的服務功能，在移動及遠程醫療中很有發展前景。這種方式突破了傳統面對面的醫療模式，醫生在外地就可以通過 Web 技術傳遞信息和醫治病人，使得高水平的醫療服務能夠普及到更廣發的區域。

雖然本系統已經取得了可喜的成績，但還可以進一步研究和改進。一方面，在與臨床醫生的交流過程中，發現醫生更為關注二維圖像的傳輸速度，因此在網絡條件一般的情況下如何提高圖像的傳輸效率便成為本文下一步要研究的一個主要問題。另一方面，由于移動設備的硬件條件相對落后，系統需要在不同的移動設備上測試其性能，并針對移動平臺改進算法與交互的方式。最后，除了肝移植模塊，還需要開發更多的定制功能模塊，如心臟三維模塊等，以滿足醫療影像需求。

[1]Rosset A,Spadola L,Ratib O．OsiriX:an open-source softwarefor navigating in multidimensional DICOM images[J]．J Digit Imaging,2004,17(3):205-216．

[2] Van Nguyen A,Avrin DE,Tellis WM,et al．What Digital Imaging and Communication in Medicine (DICOM) could look like in common object request broker (CORBA) and extensible markup language (XML)[J]．J Digit Imaging,2001,14(2):89-91．

[3] 高科．基于HTML5的數據可視化實現方法研究[J]．科技傳播,2013,(1):51-54．

[4] 徐錢燕,徐奮飛,吳福理．基于DCM4CHEE的PACS審計子系統的設計與實現[J]． 計算機光盤軟件與應用,2010,(11):46-49．

[5] 彭智勇,彭煜瑋．PostgreSQL 數據庫內核分析[M]．北京:機械工業出版社, 2012,(1):111-136．

[6] 徐星．移動醫學影像可視化系統[D]．杭州:浙江大學,2013．

[7] Salazar AJ,Aguirre DA,Ocampo J,et al．DICOM gray-scale standard display function: clinical diagnostic accuracy of chest radiography in medical-grade gray-scale and consumer-grade color displays[J]．AJR Am J Roentgenol,2014,202(6):1272-80．

[8] Cormen T．H,et al．算法導論[M]．殷建平,徐云,王剛,等．譯．3版．北京:機械工業出版社,2012:139-141．

Research on Mobile Visualization System for Medical Images Based on HTML5

WANG Xiao-feng,
RUAN Zeng-hui, ZHENG Kun
Depatment of Information, The Children’s Hospital, Zhejiang University School of Medicine, Hangzhou Zhejiang 310000, China

ObjectiveTo implement a visualization system for medical images which is oriented to modern browsers based on HTML5 and the latest Web technology.MethodsTraditional B/S mode was used to design the overall architecture of the visualization system and WebGL was used to visualize 2D medical image data and 3D volume data.ResultsThe visualization system which can run on different PC clients and mobile platforms such as mobile phones and tablet PC can support various browsers without installing any plugins.ConclusionThe cross-platform access of patients’ images has been implemented with the application with the visualization system, which has solved the problem of high cost of software transportation.

HTML5; visualization system; mobile medical images; WebGL

TP393.092

A

10.3969/j.issn.1674-1633.2014.08.014

1674-1633(2014)08-0049-03

2014-02-10

鄭焜，高級工程師。

通訊作者郵箱：zhengkun@zju．edu．cn