基于网页的可视化网络医学影像平台设计

Abstract

With the trend of the development of "Internet +", some further requirements for the mobility of medical images have been required in the medical field. In view of this demand, this paper presents a web-based visual medical imaging platform. First, the feasibility of medical imaging is analyzed and technical points. CT (Computed Tomography) or MRI (Magnetic Resonance Imaging) images are reconstructed three-dimensionally by MeVisLab and packaged as X3D (Extensible 3D Graphics) files shown in the present paper. Then, the B/S (Browser/Server) system specially designed for 3D image is designed by using the HTML 5 and WebGL rendering engine library, and the X3D image file is parsed and rendered by the system. The results of this study showed that the platform was suitable for multiple operating systems to realize the platform-crossing and mobilization of medical image data. The development of medical imaging platform is also pointed out in this paper. It notes that web application technology will not only promote the sharing of medical image data, but also facilitate image-based medical remote consultations and distance learning.

引言

电子计算机断层扫描成像（computed tomogra-phy，CT）和磁共振成像（magnetic resonance ima-ging，MRI）是一系列二维（2D）图像采集技术^[1]，但医生在通过采集到的 2D 图像数据集进行诊断时，往往会感到缺乏有效、直观的诊断信息，因此需要对图像数据集进行 3D 重建。但图像 3D 重建后往往需要专门开发桌面程序来渲染，而目前市场上操作系统存在多样化的现状，在个人电脑上有视窗操作系统（Windows）、苹果操作系统（MAC operation system，MAC OS）以及嵌入式操作系统（Linux）；在移动端有安卓（Andriod）和苹果移动操作系统（iPhone operation system，IOS）两大操作系统。目前大多数影像归档通信系统（picture archiving and communication systems，PACS）都只是在 Windows 环境下以客户端/服务器（client/server，C/S）的模式开发，即使在 INFINIT 公司的 PACS 系统中，也是通过加载插件的形式在浏览器中进行渲染，因此渲染图像的方式都不太便捷，无法跨平台。同时，由于医学图像传输需要较大的网络带宽，图像在客户端进行 3D 重建以及渲染需要计算机具有较强性能的中央处理器（central processing unit，CPU）与图形处理器（graphics processing unit，GPU），这对医院的计算机硬件与网络设施都提出了更高的要求。

为了弥补这些不足，研究人员开始开发基于网页（web）的应用程序，克服了以前桌面软件开发经常遇到的部分问题^[2]。基于 web 的应用往往比本地应用程序要多一些优势，例如：当 web 开发一个软件应用程序，可以通过浏览器在世界各地的任何用户执行，并且独立于操作系统，不需要安装任何特殊的软件。另外，web 应用程序集成在云端，即计算机云服务器，所以它能保证用户即时访问最新版本的软件，这是一个非常重要的特性。在医疗成像研究领域中，一些交互式的处理医学图像的平台已经开发并应用^[3]。

为了提供交互式的 web 3D 模型，基于网络的医学影像平台应用了三个先进的网络技术：可扩展 3D 语言（extensible 3D，X3D）、第五代超文本标记语言（hypertext markup language 5，HTML 5）、网页编程图形库（web graphics library，WebGL）。其中 X3D 技术能实现医学图像 3D 可视化，HTML 5 与 WebGL 组成渲染引擎，能够帮助处理患者的图像数据，使用交互式多边形 3D 模型，方便医生诊断以及撰写手术报告。由于这些技术提供了人体组织和器官的实时 3D 模型，使得医生能够更加便捷、有效地观片。医学 3D 模型最明显的好处是呈现了高效的解剖情况和器官之间复杂的空间关系，使医生能够更为准确地做出诊断。本文主要研究基于 web 的网络医学影像平台的设计，以期为医学图像处理提供更强大的工具，以利于在 web 平台中，让大量的医学影像数据更便捷地得到传输，更有利于基于互联网的医疗、科研、教学的发展。

1. 相关工作

1.1. HTML 5 与 WebGL 研究

HTML 5 是超文本标记语言（hyper text markup language，HTML）的第五版。HTML 5 规范了很多新的功能，其中对于浏览器图形开发较为实用的就是在 HTML 5 增加了画布（canvas）功能^[4]。使用 HTML 5 的 canvas 功能在浏览器中规范了一个矩形区域，开发人员可以在这个区域中使用脚本语言 Java-Script 代码绘制图形。

WebGL 是通过嵌入式开放图形库 2.0 版本（OpenGL for embedded systems 2.0，OpenGL ES 2.0）与 JavaScript 的绑定实现的，目前在众多浏览器中，例如：Firefox、Safari、Chrome、Opera 等，都已经实现支持 WebGL。WebGL 实质是 HTML 5 canvas 元素的一个绘制上下文^[5]。

HTML 5 之前已经实现了支持 2D 绘制上下文，在 web 的 JavaScript 代码中，使用下面的命令就可以从 canvas 元素中获取 2D 绘制上下文。

var context 2D=canvas.getContext ("2d")；

如果需要在 canvas 元素中获取 WebGL 绘制上下文，使用下面一段代码就可以实现。

var contextWebGL=canvas.getContext ("webgl")；

通过上面的方式获取到 web 图形绘制上下文后，我们可以通过 context2D 变量调用得到 HTML 5 支持的 2D 图形绘制支持函数，通过 context-WebGL 变量可以调用得到 WebGL 支持函数。

1.2. X3D 和 X3DOM 研究

X3DOM 是将集成的、抽象的 X3D 场景内容直接映射到文本对象模型（document object model，DOM）的元素^[6]。要导出 X3D 格式的 3D 场景，我们可以使用 3D 建模工具，比如医学图形处理库 MeVisLab。然后，我们可以使用通过 canvas 元素将 X3DOM 和 WebGL 集成到 HTML 5，将它们实时地显示出来。

X3D 是一个软件标准，定义了多媒体中基于网络传播的交互 3D 内容^[7]。使用 X3D 和 X3DOM，我们可以访问特定 X3D 元素定义的 JavaScript 事件函数。我们可以设计一个函数使用 X3D 中 3D 图形变化功能，用以更新特定场景元素的颜色，同时也可以应用它的用户交互功能，将特殊事件应用在 X3D 的代码中，例如单击事件，用鼠标点击一个特定的 3D 对象，然后呈现一个可视化的 3D 变化。

1.3. MeVisLab 介绍

在设计初期，MeVisLab 还只是普通的 3D 图像进行处理的程序，如今 MeVisLab 已经发展成为一个开放的图像处理流程框架。MeVisLab 最大的特色就在于其模块化运行流程的设计，所有的功能和算法都基于它的模块化处理而实现，这种功能让数据或者图像能够直接通过图形用户接口（graphics user interface，GUI）在流程中处理。在转换的过程中，系统极少出现错误，生成的图像格式也可以设定，方便用户重用。应用 MeVisLab 自带的功能模块，在不需要注入任何其它代码的情况下，就能够实现 CT 和 MRI 图像 3D 重建。

此外，在所有的主流操作系统中，MeVisLab 还提供了免费的使用认证，并且提供了开发者论坛^[8]。在最新的 2.7.1 版本中，MeVisLab 提供了 1 000 多个预定义的标准模块，还有另外 1 800 多个基于图像的配准和分隔工具（insight segmentation and registration toolkit，ITK）和图像可视化工具（the visualization toolkit，VTK）的功能模块，极大地丰富了系统功能。

2. 系统设计

2.1. 总体设计

基于 web 的医学影像系统由数据集采集、图像 3D 重建、浏览器/服务器（browser/server，B/S） 系统设计以及 3D 图像渲染等几个关键步骤组成，如图 1 所示。首先采集患者的 CT 或 MRI 形成数据集，在服务器的 MeVisLab 中进行 3D 重建，然后以 X3D 的格式输出并存储在服务器的关系型数据库（MySQL）中。每当有浏览器客户端发起图像数据请求时，服务器利用超文本预处理器（PHP：hypertext preprocessor，PHP）将图像数据转成 JavaScript 对象表示法（JavaScript object nota-tion，JSON）格式传输到客户端。客户端接收到数据后利用 WebGL 的特性将 3D 图形渲染出来。

图 1.

Treatment process of the system

系统处理流程

2.2. 图像 3D 重建

在系统中最为关键的步骤就是实现 2D 和 3D 图像可视化的一系列工作。在医学图像中，CT 或者 MRI 采集组成的图像是一系列连续的 2D 扫描数据集^[9]。数据集产生后，我们使用 MeVisLab 导入并且进行 3D 重建，整个过程直接使用了 MeVisLab 自带的图像可视化处理技术，过程使用的算法封装在可链接的模块当中^[10]。

首先，使用图像上传模块上传 2D 图像数据（CT 或者 MRI 数据），然后使用图像处理模块中的移动立方体（marching cubes，MC）算法将连续的 2D 图像片段转换成 3D 曲面网格^[11]。MC 算法是 3D 数据场等值面生成的经典算法，主要由下面 4 个步骤组成：

（1）体素的构成与获取顶点坐标及灰度值。

CT 是由不同灰度值的像素组成，等值面是由所有具有相同灰度值的点构成的连续曲面^[12]。在 3D 图像中，空间元素是由连续的体素构成，每个体素由 8 个数据点构成，每个数据点由相邻断层图像中的像素构成，如图 2 所示，在相邻两个断层图像中分别取出 4 个对应的像素点，形成 3D 图像的体素。

图 2.

Process in which adjacent pixels constitute a voxel

相邻图像像素构成体素的过程

（2）等值面与体素交点位置的计算及三角网格绘制。

在处理体素两个点的值不相同的某一条边时，等值面会与这条边相交，且仅有一个交点，交点 p 代表等值点坐标。p₁、p₂ 代表两个端点的坐标，v₁，v₂ 代表两个端点的值，v 代表等值面的值，p=p₁+（v—v₁）×（p₂—p₁）/（v₂—v₁）。求出等值面与体素棱边的交点以后，将这些交点连接成三角形或多边形，形成等值面的一部分。等值面与某一体素相交，共有15种情况，在MC算法中使用8位数据表记录体素的状态，根据状态表得到15种体素内等值面的构造类型的其中之一。

（3）等值面的法向量的计算。

在等值面上的每一点，其沿面切线方向的梯度分量值是零，因此，该点梯度矢量的方向也就代表了等值面在该点的法向。MC 算法中使用中心差分法计算任意点 M（i，j，k）的梯度^[13]。

1

这里 f（i，j，k）表示了空间中（i，j，k）这点的灰度值，然后对体素 8 个顶点上法向量进行线性插值就可得到位于体素边上三角片各个顶点的法向量。

（4）使用高洛德着色（gouraud shading）光照模型，绘制得到等值面的多边形曲面模型^[14]。

3D 重建之后，我们需要将已转换的图像输出为浏览器能够解析的数据格式。使用 MeVisLab 的 X3D 封装模块将 3D 图像封装成 X3D 文件。

2.3. B/S 系统设计

图像在经浏览器渲染之前，还需要经过一系列的处理，需要将图像文件转换成 JSON 格式与服务器进行传输^[15]。众所周知，浏览器可以通过 Java-Script 技术动态地解决用户的请求，通过浏览器将请求转移到服务器。这些请求可以以同步或者异步的方式与服务器通信，调用异步 JavaScript 和标准通用标记语言（asynchronous JavaScript and XML，AJAX）能够实现与服务器异步通信^[16]。服务器通过编程语言 PHP 启动进程和执行命令，同时，服务器存储了应用程序的数据库、系统脚本、组件等用于执行流程。当服务器收到浏览器的请求后，浏览器将刷新页面来显示从服务器端获取的内容，通过发送一个 JSON 文档，由客户机程序通过 GPU 的统一计算设备架构（compute unified device architecture，CUDA）或者开放图形语言（open computing language，OpenCL）程序异步地渲染新的内容^[17]，平台系统配置如图 3 所示。

图 3.

System configuration

系统配置

在整个 web 端数据处理过程中，我们需要经过下面两个关键步骤，如图 4 所示：

图 4.

B/S system structure

B/S 系统结构

（1）上传所有的图像数据，包括经 MeVisLab 预处理过的联合图像格式（joint photographic experts group，JPEG）和可缩放矢量图形（scalable vector graphics，SVG）文件。在服务器中，使用 PHP 语言执行服务器程序，使用 MySQL 数据库存放数据。同时，还需要一些脚本来编码和解码上传的医学图像。

（2）调用服务器的 PHP 文本，将生成的 X3D 文件转换成 JSON 格式。JSON 是一个轻量级的、基于文本交换格式的结构化数据，对序列化和网络连接非常有用，因此能够加速服务器与客户端的通信速度，并且能够节省服务器存储空间。通过使用 AJAX 异步地与服务器通信，避免用户提交每个交互请求后必须重新加载整个 web。

2.4. 3D 图像渲染

由于 X3D 运行时使用 X3DOM 能够无缝地嵌入到 DOM，场景节点可以实时访问和改变，包括旋转、放缩、透明化等 3D 变化^[18]。基于 X3DOM 技术，我们还能通过层叠样式表（cascading style sheets，CSS）对任意 DOM 子树做 3D 变形^[19]。

在 web 中的 3D 应用包含了 canvas 元素，通过 JavaScript 程序与之相关联，JavaScript 程序获取 3D 图形上下文，然后将 3D 场景绘制到这个 canvas 元素中^[20]。3D 上下文通过 OpenGL ES 2.0 的应用程序编程接口直接操作图形处理相关的硬件，进入到 WebGL 的图形处理流水线中，这种方式在以往的浏览器中是没有提供的。整个过程如图 5 所示。

图 5.

Browser rendering process

浏览器渲染流程

为了确保快速访问整个网站，我们并没有直接在 HTML 中嵌入 3D 模型。相反，我们通过 PHP 脚本将 3D 文本自动转换成 JSON 格式存放在服务器中。与标准通用标记语言文本不同，JSON 格式在访问特定场景的节点之前不需要被解析，比如顶点，光照材质，纹理等，这些场景都可以通过 JavaScript 对象在浏览器中解析^[21]。浏览器动态地访问请求 AJAX 事件的 3D 场景节点的 JSON 文本，我们可以直接从服务器中下载这些文本并且在浏览器中渲染出来，在网络畅通的情况下，这个过程通常只需要几秒钟。

3. 应用测试

3.1. 测试环境

为了能够让图像 3D 重建效率更高，我们的测试服务器配置的 CPU 是 Intel Xeon E3-1230 v3，主频率 3.3 GHz，配备了 4 核，支持 8 线程。配备了 1 TB 的硬盘，用于存储所接收的图像。客户机我们使用普通 PC 机、MAC 机、Ipad 4、三星 GALAXY S5，安装了支持 WebGL 的多种浏览器。测试环境数据量不大，网络使用普通网线和无线网在同一局域网中连接。

3.2. 测试结果

本文采集了患者的腹部 CT 数据集作为实验数据，共 110 张 JPEG 格式 CT 图像作为数据集，每张图像大小在 107～187 KB 之间，共计 13.5 MB。图像数据来自德阳市人民医院 PACS 系统，为了隐私起见，屏蔽了患者的个人信息。在整个系统中，首先在服务器的 MeVisLab 中使用 MC 算法对采集到图像数据集进行 3D 重建，然后输出为 X3D 格式并存储到数据库中。再由 PHP 文本将其转换成 JSON 格式，浏览器接收到数据并解码，通过调用 WebGL 功能在 web 中将 3D 图像渲染出来，效果如图 6 所示。

图 6.

Results of browser rendering

浏览器渲染效果

如图 6 所示，重建的 3D 骨骼图像可以在浏览器中成功渲染，也可以通过 WebGL 实现旋转、缩放功能，并且在移动手机端也能进行上述操作，基本实现了 3D 医学图像的跨平台显示，图像清晰，可浏览性较强。

本文设计实现了患者腹部骨骼的 3D 重建以及在浏览器解析渲染，针对 HTML 5 与 WebGL 跨平台的特性，分别在 Windows、MAC OS、Andriod 和 IOS 下做相应测试。测试主要包括了浏览器响应时间和渲染帧数，具体数据如表 1 所示。

表 1. Results of performance render test for multiple browsers.

多种浏览器渲染性能测试结果

操作系统	浏览器	版本	响应时间/s	帧数/fps
Windows 7	Chrome	49.0.2623.108	2.01	88
	FireFox	45.0.1	1.89	80
	搜狗	6.15.0.2076	2.32	82
MAC OS	Safari	9.0.1	1.67	95
IOS iPad4	Safari	9.2.1 内置	6.33	23
Android	Chrome	48.0.2564.95	4.57	28

如表 1 所示，示例的患者骨骼 3D 图像可以在 4 种操作系统下通过 HTML 5、WebGL 渲染出来。从表 1 测试数据可以看出，图像渲染的性能在 PC 端远远高于移动端。这是由于 PC 端的硬件（尤其是 CPU 和 GPU）性能更为强大，因此各方面的性能都优于移动端。

在独立显卡的 OpenGL 4.3 支持下，PC 端也完全支持 OpenGL ES 2.0，渲染帧数较高，并且做缩放、旋转操作没有延迟和卡顿的现象，显示都极为流畅。在各个品牌的浏览器下做测试也没有显著的性能差别，这与浏览器内核开源化有一定关系。

相对来说，移动端的性能需要一定程度的提升，响应时间较长，显示帧数不高，当对图像操作过于频繁时，会出现一点延迟和卡顿的情况，但也能满足 3D 图像的重建与显示，静态的图像质量与分辨率同 PC 端并没有明显差别。

同时，该平台并没有大规模应用在实际的医疗环境中，在一定规模的医院中，医学图像特别是 CT 与 MRI 数据量庞大。这就意味着当多个客户端发起请求时，服务器进行 3D 重建所需要占用的 CPU 资源将会比较高。因此，使用 MeVisLab 对 CT 或者 MRI 数据集进行 3D 重建预处理，将生成的 X3D 文件存储在服务器数据中，能够避免业务高峰期服务器 CPU 负载过高，但同时也将需要更多空间存储预处理图像数据。

4. 讨论

目前，基于 HTML5、WebGL、X3D 技术实现 3D 图形的可视化具有很强的适应性，克服了传统应用程序对于多平台和多系统兼容性、可移植性差的问题。同时，MeVisLab 提供了相当多的医学图像处理功能，不仅是骨骼，还包括人体各个器官的图像处理。因此，我们可以在此基础上开发、绘制更多种类的医学图像，将其应用于可视化 web 平台上。在互联网高速发展的今天，相信基于 web 平台的应用将会取得长足的发展。同时，基于 B/S 平台的交互式和可视化医学影像平台，对医疗影像数据的跨平台化、移动化有重要影响，将进一步促进远程会诊、远程医疗教学的发展。