汪小鋒，阮增輝，鄭焜

浙江大學(xué)醫(yī)學(xué)院附屬兒童醫(yī)院信息科，浙江 杭州 310001

基于HTML5的移動(dòng)醫(yī)學(xué)影像可視化系統(tǒng)的研究

汪小鋒，阮增輝，鄭焜

浙江大學(xué)醫(yī)學(xué)院附屬兒童醫(yī)院信息科，浙江 杭州 310001

目的基于HTML5和最新的Web技術(shù)，實(shí)現(xiàn)面向現(xiàn)代瀏覽器的醫(yī)學(xué)影像可視化系統(tǒng)。方法系統(tǒng)參照傳統(tǒng)的B/S模式進(jìn)行整體架構(gòu)設(shè)計(jì)，采用WebGL對(duì)二維醫(yī)學(xué)影像數(shù)據(jù)和三維體數(shù)據(jù)進(jìn)行繪制。結(jié)果系統(tǒng)可運(yùn)行在不同PC端及移動(dòng)平臺(tái)（手機(jī)、平板電腦等）上，支持各類(lèi)瀏覽器，無(wú)需安裝任何插件。結(jié)論本系統(tǒng)實(shí)現(xiàn)了對(duì)病人影像的跨平臺(tái)訪(fǎng)問(wèn)，解決了軟件移植成本過(guò)于龐大的問(wèn)題。

HTML5；可視化系統(tǒng)；移動(dòng)醫(yī)學(xué)影像；WebGL

0 前言

醫(yī)學(xué)影像設(shè)備不斷的發(fā)展產(chǎn)生了大量醫(yī)學(xué)影像數(shù)據(jù)，這些影像所包含的信息在診斷治療中有巨大的價(jià)值。醫(yī)學(xué)影像可視化系統(tǒng)使用計(jì)算機(jī)和圖像處理技術(shù)充分挖掘醫(yī)學(xué)影像的信息，為醫(yī)生診斷、治療、手術(shù)等提供有力的支持。

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

本文基于 HTML5 和最新的 Web 技術(shù)，實(shí)現(xiàn)了面向現(xiàn)代瀏覽器的醫(yī)學(xué)影像可視化系統(tǒng)。系統(tǒng)使用 WebWorkers來(lái)異步傳輸圖像，利用 WebGL 對(duì)硬件加速的支持在瀏覽器端實(shí)時(shí)繪制二維和三維影像，并通過(guò)自定義的傳輸協(xié)議為用戶(hù)提供各種定制服務(wù)。該系統(tǒng)不依賴(lài)于任何插件及平臺(tái)，大大提升了用戶(hù)體驗(yàn)，為遠(yuǎn)程及移動(dòng)醫(yī)療影像可視化系統(tǒng)開(kāi)拓了前景[3]。

1 系統(tǒng)分析與設(shè)計(jì)

1.1 整體設(shè)計(jì)方案

整個(gè)系統(tǒng)的設(shè)計(jì)思路是按照 B/S 的模式（圖 1）來(lái)建立，瀏覽器端與服務(wù)端通過(guò) http 協(xié)議來(lái)進(jìn)行通信。前端主要運(yùn)用 HTML5 和 JAVASCIPT 來(lái)編寫(xiě)頁(yè)面及相應(yīng)的交互功能，通過(guò)修改 CSS 文件來(lái)控制整個(gè)頁(yè)面的布局。而服務(wù)端則是通過(guò)各種 cgi程序響應(yīng)動(dòng)態(tài)服務(wù)。

圖1 整體系統(tǒng)設(shè)計(jì)圖

1.2 圖像信息的搜索

圖像的搜索和訪(fǎng)問(wèn)是本系統(tǒng)的基礎(chǔ)，同樣是也核心模塊，直接影響二維圖像的交互以及三維影像的顯示。在服務(wù)端我們使用了 DCM4CHEE PACS[4]服務(wù)器來(lái)對(duì) DICOM 圖像進(jìn)行歸檔處理，對(duì)圖像的搜索只需直接對(duì) DCM4CHEE PACS服務(wù)器的數(shù)據(jù)庫(kù)服務(wù)器進(jìn)行訪(fǎng)問(wèn)便可。在本系統(tǒng)服務(wù)端安裝的是 Postgresql數(shù)據(jù)庫(kù)[5]。

1.3 圖像數(shù)據(jù)請(qǐng)求

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

圖2 圖像傳輸框架圖

服務(wù)器端使用 dcmtk 開(kāi)源庫(kù)來(lái)對(duì) DICOM 圖像進(jìn)行解析，一旦接受到 Worker發(fā)送過(guò)來(lái)的路徑信息，便找到相應(yīng)的圖像文件對(duì)其解析，通過(guò) json 的數(shù)據(jù)格式返回給瀏覽器端。瀏覽器端利用 HTML5 中的 Canvas 使用 WebGL 進(jìn)行繪制。具體流程，見(jiàn)圖3。

圖3 醫(yī)學(xué)影像數(shù)據(jù)請(qǐng)求處理流程圖

2 主要實(shí)現(xiàn)功能

2.1 二維圖像交互功能

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

2.2 窗寬與窗位調(diào)整

窗寬與窗位的調(diào)整主要是利用捕獲鼠標(biāo)事件，計(jì)算鼠標(biāo)在垂直和水平方向的位移量來(lái)計(jì)算響應(yīng)值的大小，不過(guò)在紋理傳輸過(guò)程中，我們發(fā)現(xiàn) Webgl不支持浮點(diǎn)型紋理，因此無(wú)法把較高精度的紋理傳進(jìn) shader之中。面對(duì)這個(gè)問(wèn)題，我們認(rèn)識(shí)到雖然 RGBA 每個(gè)分量只有8位空間，但是由于所傳輸?shù)尼t(yī)學(xué)影像是灰度圖像，因此可以將RGBA 的32位全部用來(lái)存儲(chǔ)灰度值信息，這樣便能用高精度的紋理數(shù)據(jù)來(lái)顯示繪制結(jié)果。紋理傳入 shader之后，根據(jù)當(dāng)前窗寬與窗位的大小將其映射到 0～255 顏色值之間，最后通過(guò)查找偽彩色表得到顯示在屏幕上的顏色值[6]。

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

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

圖4 三維圖像繪制流程圖

2.4 自定義功能模塊

除了一般二維、三維繪制顯示和交互功能之外，系統(tǒng)作為一個(gè)基礎(chǔ)醫(yī)學(xué)影像可視化平臺(tái)還提供了對(duì)定制功能模塊的擴(kuò)展。系統(tǒng)的自定義交換格式可根據(jù)用戶(hù)需求加入指定的相應(yīng)指令。功能模塊的擴(kuò)展使得前端只需負(fù)責(zé)用戶(hù)交互及簡(jiǎn)單的運(yùn)算，復(fù)雜的計(jì)算過(guò)程都由服務(wù)器來(lái)完成。本系統(tǒng)針對(duì)活體肝移植手術(shù)實(shí)現(xiàn)了肝臟血管分割，因?yàn)檠芘c肝臟組織的對(duì)比度比較大，系統(tǒng)采用了 RegionGrowing 算法來(lái)實(shí)現(xiàn)肝臟血管的分割[8]。用戶(hù)只要在影像上選擇好區(qū)域增長(zhǎng)的種子點(diǎn)、設(shè)置好閾值并發(fā)送指令給服務(wù)器，服務(wù)器便會(huì)根據(jù)這些參數(shù)計(jì)算得到血管數(shù)據(jù)，最后返回給前端進(jìn)行顯示。

3 結(jié)語(yǔ)

此系統(tǒng)作為基礎(chǔ)醫(yī)學(xué)影像可視化平臺(tái)，可以根據(jù)用戶(hù)不同的需求來(lái)定制相應(yīng)的服務(wù)功能，在移動(dòng)及遠(yuǎn)程醫(yī)療中很有發(fā)展前景。這種方式突破了傳統(tǒng)面對(duì)面的醫(yī)療模式，醫(yī)生在外地就可以通過(guò) Web 技術(shù)傳遞信息和醫(yī)治病人，使得高水平的醫(yī)療服務(wù)能夠普及到更廣發(fā)的區(qū)域。

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

[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的數(shù)據(jù)可視化實(shí)現(xiàn)方法研究[J]．科技傳播,2013,(1):51-54．

[4] 徐錢(qián)燕,徐奮飛,吳福理．基于DCM4CHEE的PACS審計(jì)子系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]． 計(jì)算機(jī)光盤(pán)軟件與應(yīng)用,2010,(11):46-49．

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

[6] 徐星．移動(dòng)醫(yī)學(xué)影像可視化系統(tǒng)[D]．杭州:浙江大學(xué),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．算法導(dǎo)論[M]．殷建平,徐云,王剛,等．譯．3版．北京:機(jī)械工業(yè)出版社,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

鄭焜，高級(jí)工程師。

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