基于HTML5標準的Dicom 圖像顯示

夏申頻

0 引言

一直以來，顯示Dicom 醫學圖像都是在專業的工作站上，使用專業程序來進行的。這些設備昂貴、笨重、使用復雜、兼容性差，對移動平臺極不友好。在硬件方面，由于醫學圖像的高空間分辨率和高灰度分辨率，往往需要高性能處理器和專業顯示設備，才能達到可供臨床使用的效果，但是，從前所有的移動設備，都不具有這兩點。從軟件層面上來說，醫學圖像工作站專業系統的開發，很少顧及到跨平臺、兼容性的問題，更少想到對移動設備的支持。

這些系統，往往使用Com+/ActiveX、VCL/CLX 等基于C/C++ 語言的技術或平臺，很少使用像Java 這樣在移動設備上廣泛支持的技術，使得遷移到移動平臺上的開發代價變得相當高。

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

1 HTML5 技術標準下的Dicom 圖像顯示

1.1 HTML5 標準

在HTML5 標準提出以前，要在瀏覽器端處理圖像，必須依賴第3方插件（如Flash，Silverlight）。因為早期瀏覽器的JavaScript 處理引擎性能不佳，無法勝任圖形處理的要求。HTML5 中新引入的 Canvas 元素，使得可以直接使用JavaScript 腳本在Web 頁面進行繪。一般顯示 Dicom 圖像都使用像素級別的繪圖，而Canvas 標簽支持像素級別的位圖繪圖技術。已知Chrome 的V8,Firefox 的SpiderMonkey 以及Safari 的Nitro 等引擎，都已經能夠很好地進行二維繪圖。

1.2 Canvas 標簽

Canvas為HTML5標準中新制定的繪圖標簽，

定義一個Canvas 只需要進行如下的聲明：

在JavaScript 腳本中，可以使用語句來獲得這個Canvas對象，假設使用JQuery 庫的代碼如下：

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

2D Canvas 提供了許多繪圖函數，但是對于Dicom 圖像渲染，主要使用的是3個像素級操作:createImageData ,getImageData , 和putImageData。

2 Dicom 文件結構

為了解析Dicom 圖像，必須要了解Dicom 文件結構。

Dicom 文件由序列排布的一組元素（Element）構成，一個元素是構成Dicom 文件的基本單位。元素的結構分為元素頭和元素數據。所有元素頭的結構都是相同的，其長度為8 個Byte，包含4 個數據元素，其數據結構用C 語言的語法可以定義為:

其中group(組號),element(元素號) 構成一個tag(標簽),唯一標示了該元素的，可以通過tag 查表得到元素的實際名稱。如(7FE0, 0010) 為Pixel Data 即圖像數據。

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

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

圖1 Dicom存放格式

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

表1 Dicom文件所需要的元素

3 簡單的瀏覽器端Dicom 圖像渲染

為了實際驗證在瀏覽器端顯示Dicom 圖像的效果，編寫了必要的服務器端腳本和一個HTML5 頁面。服務器端腳本使用Python 語言開發，基于Flask框架,主要用于幫助傳輸dicom圖像。客戶端腳本使用javascript開發。

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

其內部包含三個功能類分別為：

XHRFile 可以像使用普通文件一樣來訪問通過XHR方法獲得的文件數據。主要有open，read，close等方法，方便了遷移傳統的Dicom文件解析代碼。

DicomImage 代表了一幅Dicom圖像，其構造函數為一個數據字典，里面的鍵為Dicom標準中定義的名稱。該類主要有獲取CT值，調整窗口窗位等方法。

DicomReader 從文件中讀取Dicom的功能類。主要功能是根據Dicom文件結構的標準定義，從XHRFile對象中遞歸的讀取每一個數據元素，直到文件末尾。對于具體的每一個數據元素，先讀取8個字節的頭信息，確定數據類型和長度。如果是“OB”或“OW”等變長數據，還需要根據Dicom標準的定義確定需要讀取的數據長度。如此一個一個的循環讀取全部元素。

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

文件“ miniDicom_meta.js”為Dicom標準中的數據字典，是根據Dicom標準生成的Javascript字典對象，每一條記錄描述了一種數據元素。

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

圖2

主要的繪圖代碼如下：

整個頁面在Google Chrome 11 和Firefox 9 兩款瀏覽器上測試運行。由于標準遵循的問題，暫時沒有支持Internet Explorer系列瀏覽器。測試地址為http://jsdicom.sinaapp.com/.圖2為在Android2.3系統上Friefox9 瀏覽器中的顯示畫面。其中使用的Dicom文件都為不壓縮的存放格式。

4 結束語

隨著移動設備的快速發展和移動醫療需求的不斷增加，促使了醫學圖像顯示技術在移動設備上的發展。同時隨著新生的HTML5 標準的廣泛應用，大大改變了原來的應用程序開發使用方式，極大的增強了應用的兼容性。移動設備加HTML5 的組合將是今后軟件開發者關注的重點。而基于HTML5 標準的醫學圖像程序，較傳統的方式，從安裝和使用都更加簡化了，變得和普通的瀏覽網頁一樣簡單。為了進一步實現和完善瀏覽器端的Dicom 顯示應用，未來我們還將要繼續完善以下幾項內容：

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

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

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

[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]佟英紅曹伯燕，無損壓縮Dicom 文件解讀的實現[J]，計算機應用,2003,23

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

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