基于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