基于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格式圖像的醫學圖像系統，在一定程度上增大了在線醫療的可能性，豐富了在線醫療的功能。