基于React的Web医学图像系统设计与实现

朱剑林，唐尚昆

（中南民族大学计算机科学学院，湖北 武汉 430074）

0 引言

随着互联网的发展和普及，人们越来越倾向于从网络上便利地获取各种信息，截至2022年12月，我国的网民已经超过了10.67亿。随着科技的不断发展，网络上各种新应用层出不穷，但是对于在线医疗中关于医学图像相关方面的应用，有很大的发展前景和空间。

医学图像存储和传输标准（Digital Imaging and Communications in Medicine，DICOM）是被医疗界广泛接受、部署最为广泛的医疗信息标准之一[1]。DICOM格式图像无法直接在通用浏览器或看图软件中打开，而需要使用专用的影像工作站或安装专用浏览软件；如果医生或科研工作者需要在医院、实验室等以外的场所观看影像极为不便[2]；随着HTML5的发展以及各大前端框架的涌现，前端浏览器能做的工作越来越多，功能越来越强大，通过前端浏览器JavaScript就可以解析DICOM 格式图像并且通过Canvas 可以把图像完整清晰地渲染在各个可以运行浏览器的终端（电脑端、移动端等）上，在使用端上还可以按需自助下载，避免了丢失图像就无法查看以及需要重新拍片等问题。通过医学图像的后台管理系统，可以很方便地查看以及管理每个患者的图像。

由此可见，通过前端浏览器去实现DICOM图像的展示以及管理具有重要意义，它会大大地便利了人们的生活，医院也不需要给每台终端都下载对应的DICOM浏览器，也减少了医生的工作量，增强了医疗图像的应用场景。

本文主要阐述了通过浏览器实现在线查看并管理DICOM格式医学图像的研究背景和现实意义，并对基于React框架[3]如何开发DICOM医学图像管理系统、如何部署此系统到服务器、系统中所涉及的主要技术进行了一个详细介绍。其次，由于React社区中很少有相关的以TypeScript 编写的关于渲染DICOM 图像的组件，所以本文还介绍了开发此组件并开源在NPM 社区。通过React 框架以及Cornerstone.js[4]，可以很完善地开发出一个关于医学图像的在线医疗应用。

1 相关工作

React 是一个用于构建用户界面的JavaScript 库，它把传统HTML、JavaScript、CSS前端三件套整合在一起，形成组件，这就是它的核心思想——组件化。除此之外，React的性能是十分出色的，传统前端每一次更新数据都会重新渲染所有的DOM元素，若只改变一小部分数据但是却执行一次页面所有DOM元素，付出的性能代价是不成正比的，React 通过对模拟真实DOM元素，生成虚拟DOM元素，当数据更新时，将虚拟DOM元素与真实DOM元素进行特有的Diff对比算法[5]，将真正需要更新的某些DOM元素进行更新，达到了高效又快速的目标。

DICOM 是医学影像和相关信息(ISO 12052)的唯一国际标准，广泛应用于医学影像存储与管理、影像科室工作流程、影像显示、影像的网络传输及信息交换等各个方面，是医院信息化建设的重要组成部分，在疾病的诊断、治疗和临床研究中发挥了十分重要的作用。随着医学影像设备的快速发展和PACS 系统的广泛应用，对医学影像文件格式的要求也越来越集中在DICOM 标准遵从性上。只有符合DICOM 格式的医学影像数据才能够确保在不同厂家的设备、服务器和工作站之间互相传输及存储[6]。并且前端浏览器对于DICOM格式的文件的支持并不算友好，完全不能兼容此类的文件格式。国外cornerstoner 团队就是致力于开发有关于医学图像DICOM方面相关的JavaScript库供开发者使用，并且开源了cornerstone.js这个DICOM解析库，该JavaScript 库就是浏览器用于解析DICOM 文件格式并且渲染在浏览器上，但是cornerstone.js 对于React框架来说还有些许兼容性及配置问题。国内外对于DICOM应用软件大部分都是商用不开源的,飞速发展的互联网促进着在线医疗的平台可扩展性的发展。

2 系统设计与实现

基于React开发的Web前端医学图像管理系统，研发过程共分为四个阶段，主要为需求分析阶段、总体方案设计阶段、系统开发、系统调试和完善阶段。

2.1 系统页面需求分析

本系统的设计目标是开发出一个DICOM 格式的医学图像管理系统，其中有供患者使用的使用端，还有供管理者（医师）使用的管理端，并且对于电脑端浏览器来说还可以在此医学图像上进行简单标注后下载，给予用户更多功能。本系统的架构主要采用了组件化思想去设计，每一个页面都可以独立成可复用的页面组件，各页面组件的需求分析如下：

本工程是超高层综合体建筑，对项目的组织协调要求高，周边场地狭小、基坑深度大、绿色施工和安全环保施工要求高，施工现场作业面大，东西区作业进度不同步，各个小分区施工存在高低差，现场复杂多变，现场平面布置不断变化，给现场合理布置带来困难。

1）注册登录页面:登录页面是系统的第一道安全防线，也是确认身份标识最重要的一步，通过登录页面可以准确验证身份信息从而调取不同的医学图像文件给相应的用户。对于注册登录页面需求主要如下：

①注册信息的校验，如非空校验、特殊字符校验、密码安全性校验。

②登录页面的逻辑设计，如未登录但是通过URL访问系统其他页面时，应该跳回登录页面。

2）客户端系统主页:客户端主页主要是展示某用户下的所有相关医学图像列表以供查看，并且应该还需支持下载、退出登录等功能，所以主要需求如下：

①渲染医学图像列表。

②可以供患者查看并下载自己的医学图像。

③个人信息、退出登录。

3）医学图像查看页:这是使用端的核心页面，可以查看打开的DICOM格式医学图像，并且根据需要可以调整DICOM的图像显示配置，如灰度、明暗度等，并且还可以在上面进行一个简单标注，最后还可以做到标注完之后保存所标注的内容和医学图像。

②能够简单调节DICOM图像的各种参数配置。

③在DICOM图像上可以做一个简单的标注功能。

④下载调整完配置以及标注后的一个新的DICOM图像。

4）管理端页面:管理端主要是方便对现有的图像库进行一个管理，其中设计到的操作主要是关于医学图像的增删改查，所以管理端主页设计主要需求就是调用后端的接口从而达到操作医学图像数据库的目的。

2.2 系统的技术框架

系统的技术框架总体分为三层：

第一层为前端Web 层，其使用了React 作为Web开发的框架[7]，在React的基础上，运用了Cornerstone.JS去渲染DICOM医学图像，最后用Webpack进行一个项目的打包构建。并且对于前后端的请求主要是用到了Axios.js这个第三方库去进行完成。

第二层为后端层，这里后端主要用到的技术栈为Java。

第三层为基础技术层，这里用Nginx[8]、Docker[9]来实现部署在CentOS服务器上。用Yarn来进行管理项目的依赖包。用TypeScript作为主要开发语言。用Git来进行代码托管，方便管理代码。

2.3 系统开发

本节主要介绍了系统的详细开发过程，包括初始化项目、路由开发、页面开发。

1）初始化项目:对于客户端开发，初始化项目采用了Create-React-App 脚手架工具去初始化的，该脚手架工具可以方便快速稳定地构建一个新的React项目，通过运行脚手架工具初始化项目的命令之后，即可完成初始化一个全新的React项目。初始化React项目之后，就要安装之前设计所提到技术对应的第三方库，例如cornerstone.js、antd、axios.js，这里主要是通过yarn这个依赖包管理工具从NPM（世界上最大的开源nodeJs库）去安装对应的第三方库的。

2）路由开发:在开发页面之前需要先注册路由，将对应的页面注册到对应的路由中去，此时才可以正确根据URL来定位到相对应的页面中去。React-Router是一个完整的React 路由解决方案，此处注册路由使用的是React-Router6。主要注册了四个页面：登录页（login）、主页（main）、用户信息页（user）、图像详情页（detail）。

3）页面开发:登录页（login）有账号输入框、密码输入框、确认按钮这些元素，通过antd将登录页面开发完成;主页（main）的核心设计封装了两个组件，一个是Tab菜单切换组件，一个是医学图像列表组件;用户信息页（user）根据请求用户的信息，等待用户信息成功返回后将其渲染在所对应的位置；图像详情页（detail）包含渲染DICOM 图像组件的开发与开源（DicomViewer）、标注工具栏的开发。

该文将DicomViewer 组件进行了开源，react-dicom-viewer是在NPM上发布的开源的包名称，其中DicomViewer是渲染Dicom图像的组件。

3 系统测试与结果展示

3.1 个人主页

登录之后成功登录之后即可进入个人主页进行相对应的操作，例如查看个人的对应的医学图像等。如图1所示。

图1 个人主页

3.2 医学图像详情页

在个人主页中，点击查看按钮，跳转到相对应的图像详情页，如图2所示。通过工具栏实现更改图像显示配置与标注的效果。标注以及配置好图片显示效果之后，可以进行下载。

图2 标注效果

4 总结与展望

本文针对在线医疗[10]目前的目前背景进行研究，设计了一套基于React框架能够在浏览器渲染DICOM格式图像的医学图像系统，在一定程度上增大了在线医疗的可能性，丰富了在线医疗的功能。