基于HTML5標(biāo)準(zhǔn)的Dicom 圖像顯示

夏申頻

0 引言

一直以來(lái)，顯示Dicom 醫(yī)學(xué)圖像都是在專業(yè)的工作站上，使用專業(yè)程序來(lái)進(jìn)行的。這些設(shè)備昂貴、笨重、使用復(fù)雜、兼容性差，對(duì)移動(dòng)平臺(tái)極不友好。在硬件方面，由于醫(yī)學(xué)圖像的高空間分辨率和高灰度分辨率，往往需要高性能處理器和專業(yè)顯示設(shè)備，才能達(dá)到可供臨床使用的效果，但是，從前所有的移動(dòng)設(shè)備，都不具有這兩點(diǎn)。從軟件層面上來(lái)說(shuō)，醫(yī)學(xué)圖像工作站專業(yè)系統(tǒng)的開發(fā)，很少顧及到跨平臺(tái)、兼容性的問(wèn)題，更少想到對(duì)移動(dòng)設(shè)備的支持。

這些系統(tǒng)，往往使用Com+/ActiveX、VCL/CLX 等基于C/C++ 語(yǔ)言的技術(shù)或平臺(tái)，很少使用像Java 這樣在移動(dòng)設(shè)備上廣泛支持的技術(shù)，使得遷移到移動(dòng)平臺(tái)上的開發(fā)代價(jià)變得相當(dāng)高。

不過(guò)隨著移動(dòng)終端設(shè)備的不斷發(fā)展，尤其是在FDA 批準(zhǔn)了首款移動(dòng)設(shè)備進(jìn)入醫(yī)療影像行業(yè)，標(biāo)志著移動(dòng)設(shè)備已經(jīng)完全滿足顯示、處理醫(yī)學(xué)圖像的要求，醫(yī)療應(yīng)用市場(chǎng)已經(jīng)向移動(dòng)設(shè)備開發(fā)者們敞開。但是，目前的移動(dòng)設(shè)備品種多樣，各大品牌的設(shè)備各自為政，彼此不互相兼容，這意味這如果使用傳統(tǒng)的移動(dòng)設(shè)備開發(fā)平臺(tái)，需要為每一個(gè)平臺(tái)進(jìn)行開發(fā)和測(cè)試，這既費(fèi)時(shí)又費(fèi)力。好在目前所有主要品牌的產(chǎn)品中，有一點(diǎn)是共同的，它們都具有一個(gè)支持HTML5 技術(shù)標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。所以，如果能設(shè)計(jì)基于HTML5 平臺(tái)的Dicom顯示程序，將能覆蓋到幾乎所有的主流移動(dòng)終端設(shè)備，具有極大的兼容性。

1 HTML5 技術(shù)標(biāo)準(zhǔn)下的Dicom 圖像顯示

1.1 HTML5 標(biāo)準(zhǔn)

在HTML5 標(biāo)準(zhǔn)提出以前，要在瀏覽器端處理圖像，必須依賴第3方插件（如Flash，Silverlight）。因?yàn)樵缙跒g覽器的JavaScript 處理引擎性能不佳，無(wú)法勝任圖形處理的要求。HTML5 中新引入的 Canvas 元素，使得可以直接使用JavaScript 腳本在Web 頁(yè)面進(jìn)行繪。一般顯示 Dicom 圖像都使用像素級(jí)別的繪圖，而Canvas 標(biāo)簽支持像素級(jí)別的位圖繪圖技術(shù)。已知Chrome 的V8,Firefox 的SpiderMonkey 以及Safari 的Nitro 等引擎，都已經(jīng)能夠很好地進(jìn)行二維繪圖。

1.2 Canvas 標(biāo)簽

Canvas為HTML5標(biāo)準(zhǔn)中新制定的繪圖標(biāo)簽，

定義一個(gè)Canvas 只需要進(jìn)行如下的聲明：

在JavaScript 腳本中，可以使用語(yǔ)句來(lái)獲得這個(gè)Canvas對(duì)象，假設(shè)使用JQuery 庫(kù)的代碼如下：

但是，Canvas 標(biāo)簽本身是不能直接繪圖的，就像在從前的Gui 程序開發(fā)中，窗口本身是不支持繪圖的，需要構(gòu)造出繪圖上下文設(shè)備（DC），然后在DC 上使用繪圖函數(shù)。在Canvas 上的繪圖操作，也是在上下文設(shè)備上進(jìn)行的。目前可以構(gòu)造2D、3D 兩種上下文設(shè)備，對(duì)于Dicom 文件的顯示，使用2D 設(shè)備已經(jīng)足夠了。生成2D 繪圖上下文設(shè)備的代碼如下：

2D Canvas 提供了許多繪圖函數(shù)，但是對(duì)于Dicom 圖像渲染，主要使用的是3個(gè)像素級(jí)操作:createImageData ,getImageData , 和putImageData。

2 Dicom 文件結(jié)構(gòu)

為了解析Dicom 圖像，必須要了解Dicom 文件結(jié)構(gòu)。

Dicom 文件由序列排布的一組元素（Element）構(gòu)成，一個(gè)元素是構(gòu)成Dicom 文件的基本單位。元素的結(jié)構(gòu)分為元素頭和元素?cái)?shù)據(jù)。所有元素頭的結(jié)構(gòu)都是相同的，其長(zhǎng)度為8 個(gè)Byte，包含4 個(gè)數(shù)據(jù)元素，其數(shù)據(jù)結(jié)構(gòu)用C 語(yǔ)言的語(yǔ)法可以定義為:

其中g(shù)roup(組號(hào)),element(元素號(hào)) 構(gòu)成一個(gè)tag(標(biāo)簽),唯一標(biāo)示了該元素的，可以通過(guò)tag 查表得到元素的實(shí)際名稱。如(7FE0, 0010) 為Pixel Data 即圖像數(shù)據(jù)。

所有的元素頭及其含義在文件miniDicom_meta.js 中定義。

VR 指明數(shù)據(jù)元素中數(shù)據(jù)的類型, 為2 字節(jié)的字符串。。數(shù)據(jù)長(zhǎng)度VL 指明數(shù)據(jù)元素的數(shù)據(jù)域中數(shù)據(jù)的長(zhǎng)度(字節(jié)數(shù)) 。數(shù)據(jù)域中包含了數(shù)據(jù)元素的數(shù)值。在元素頭后面的就是按VL 指定長(zhǎng)度存放的VR 格式的元素?cái)?shù)據(jù)。Dicom 文件就是這樣由一個(gè)個(gè)元素依次存放組成，如圖1所示：

圖1 Dicom存放格式

在解析Dicom 文件后，為了顯示圖像，必須要的元素，如表1所示：

表1 Dicom文件所需要的元素

3 簡(jiǎn)單的瀏覽器端Dicom 圖像渲染

為了實(shí)際驗(yàn)證在瀏覽器端顯示Dicom 圖像的效果，編寫了必要的服務(wù)器端腳本和一個(gè)HTML5 頁(yè)面。服務(wù)器端腳本使用Python 語(yǔ)言開發(fā)，基于Flask框架,主要用于幫助傳輸dicom圖像?？蛻舳四_本使用javascript開發(fā)。

文件“jsdicom.js”，為主要編寫的文件，

其內(nèi)部包含三個(gè)功能類分別為：

XHRFile 可以像使用普通文件一樣來(lái)訪問(wèn)通過(guò)XHR方法獲得的文件數(shù)據(jù)。主要有open，read，close等方法，方便了遷移傳統(tǒng)的Dicom文件解析代碼。

DicomImage 代表了一幅Dicom圖像，其構(gòu)造函數(shù)為一個(gè)數(shù)據(jù)字典，里面的鍵為Dicom標(biāo)準(zhǔn)中定義的名稱。該類主要有獲取CT值，調(diào)整窗口窗位等方法。

DicomReader 從文件中讀取Dicom的功能類。主要功能是根據(jù)Dicom文件結(jié)構(gòu)的標(biāo)準(zhǔn)定義，從XHRFile對(duì)象中遞歸的讀取每一個(gè)數(shù)據(jù)元素，直到文件末尾。對(duì)于具體的每一個(gè)數(shù)據(jù)元素，先讀取8個(gè)字節(jié)的頭信息，確定數(shù)據(jù)類型和長(zhǎng)度。如果是“OB”或“OW”等變長(zhǎng)數(shù)據(jù)，還需要根據(jù)Dicom標(biāo)準(zhǔn)的定義確定需要讀取的數(shù)據(jù)長(zhǎng)度。如此一個(gè)一個(gè)的循環(huán)讀取全部元素。

另外由于在Dicom標(biāo)準(zhǔn)，允許數(shù)據(jù)類型VR是顯式(Explicit VR) 和隱式(Implicit VR) 兩種。在讀取數(shù)據(jù)時(shí)，取決于事先商定的數(shù)據(jù)傳輸句法(Transfer Syntax UID),其包含在標(biāo)簽為(0002, 0010) 的數(shù)據(jù)元素中。數(shù)據(jù)在顯式傳輸時(shí)VR 必須存在, 而隱式傳輸時(shí)VR 為空。組號(hào)為0002 的數(shù)據(jù)元素都是顯式的。所以該類也具有根據(jù)“TransferSyntaxUID”標(biāo)簽，處理數(shù)據(jù)類型為顯示和隱式兩種Dicom文件的功能。在解析Dicom文件時(shí)，首先判斷“TransferSyntaxUID”標(biāo)簽，根據(jù)其數(shù)值來(lái)設(shè)置標(biāo)志位，以此決定以后的元素?cái)?shù)據(jù)的取得方式。

文件“ miniDicom_meta.js”為Dicom標(biāo)準(zhǔn)中的數(shù)據(jù)字典，是根據(jù)Dicom標(biāo)準(zhǔn)生成的Javascript字典對(duì)象，每一條記錄描述了一種數(shù)據(jù)元素。

在文件“index.js”文件中，先通過(guò)希望顯示的Dicom文件URL，獲得一個(gè)XHRFile對(duì)象，然后使用DicomReader類來(lái)解析此文件對(duì)象，得到一個(gè)DicomImage對(duì)象，通過(guò)此圖像對(duì)象來(lái)獲取渲染圖像所需要的信息，最后在Canvas標(biāo)簽中，顯示圖像，如圖2所示：

圖2

主要的繪圖代碼如下：

整個(gè)頁(yè)面在Google Chrome 11 和Firefox 9 兩款瀏覽器上測(cè)試運(yùn)行。由于標(biāo)準(zhǔn)遵循的問(wèn)題，暫時(shí)沒(méi)有支持Internet Explorer系列瀏覽器。測(cè)試地址為http://jsdicom.sinaapp.com/.圖2為在Android2.3系統(tǒng)上Friefox9 瀏覽器中的顯示畫面。其中使用的Dicom文件都為不壓縮的存放格式。

4 結(jié)束語(yǔ)

隨著移動(dòng)設(shè)備的快速發(fā)展和移動(dòng)醫(yī)療需求的不斷增加，促使了醫(yī)學(xué)圖像顯示技術(shù)在移動(dòng)設(shè)備上的發(fā)展。同時(shí)隨著新生的HTML5 標(biāo)準(zhǔn)的廣泛應(yīng)用，大大改變了原來(lái)的應(yīng)用程序開發(fā)使用方式，極大的增強(qiáng)了應(yīng)用的兼容性。移動(dòng)設(shè)備加HTML5 的組合將是今后軟件開發(fā)者關(guān)注的重點(diǎn)。而基于HTML5 標(biāo)準(zhǔn)的醫(yī)學(xué)圖像程序，較傳統(tǒng)的方式，從安裝和使用都更加簡(jiǎn)化了，變得和普通的瀏覽網(wǎng)頁(yè)一樣簡(jiǎn)單。為了進(jìn)一步實(shí)現(xiàn)和完善瀏覽器端的Dicom 顯示應(yīng)用，未來(lái)我們還將要繼續(xù)完善以下幾項(xiàng)內(nèi)容：

(1) 探索如何解決Internet Explorer 系列瀏覽器對(duì)HTML5更好支持的方式，雖然目前為止IE 系列瀏覽器對(duì)HTML5 和移動(dòng)設(shè)備的支持都不佳，但是由于其在普通PC上的極大的市場(chǎng)占有率，所以如何解決IE對(duì)HTML5的 支持是一個(gè)非常迫切的問(wèn)題。

(2) 探索如何解決對(duì)使用JPEG Lossless 無(wú)損壓縮的Dicom 圖像的支持，越來(lái)越多的放射影像設(shè)備在傳送Dicom文件時(shí)使用了壓縮算法，雖然可以事后手動(dòng)解壓，但是如果能直接支持壓縮格式的Dicom 文件將大大方便臨床的使用。

(3) 探索如何增強(qiáng)在瀏覽器端對(duì)Dicom 圖像的簡(jiǎn)單處理功能，由于放射影像的特殊性，往往需要有調(diào)整窗寬窗位等功能來(lái)幫助閱片，所以為了滿足臨床的需要，需要增加像調(diào)窗這樣的簡(jiǎn)單圖像處理能力。

[1]National Electrical Manufacturers Association,Digital Imaging and Communications in[j]Medicine Part 5: Data

[2]Structures and Encoding[S],2009

[3]National Electrical Manufacturers Association,Digital Imaging and Communications in[j]Medicine Part 14:

[4]Grayscale Standard Display Function[S],2009

[5]World Wide Web Consortium,HTML Canvas 2D Context[S],http://www.w3.org/TR/2dcontext/,2011

[6]Food and Drug Administration,[j]FDA clears first diagnostic radiology application for mobile devices[

[7]EB/OL],http://www.fda.gov/NewsEvents/Newsroom/Pres sAnnouncements/ucm242295.htm,2011

[8]佟英紅曹伯燕，無(wú)損壓縮Dicom 文件解讀的實(shí)現(xiàn)[J]，計(jì)算機(jī)應(yīng)用,2003,23

[9]林林, 使用HTML5 canvas 進(jìn)行Web 繪圖[EB/OL],http://www.ibm.com/developerworks/cn/web/10 12_

[10]linlin_html5canvas/index.[s]html,2010