DcmViewer 医疗影像系统技术与使用说明

一、概述

DcmViewer医疗影像系统网站:dcmviewer.com

DcmViewer是一个纯客户端的即时医疗影像系统,支持标准的DICOM影像文件,用来提供看图阅片等功能,同时支持一些配套图形操作工具,使用过程中不会保存任何影像信息到服务器端。在进入系统后,系统将自动从服务器上下载一个样例数据,因为一套完整的CT数据大约有几十兆大小,下载完整的数据,需要一定的时间,为了提高样例的加载效率,DcmViewer首先下载其中的10张样例数据,显示为2D图像。

image

如果需要浏览样例的3D图像,点击工具箱里的“三维”按钮,等样例数据全部图片加载完成后即可查看。

工具箱里的“三维”按钮:

image

3D图像界面:

image

同时,DcmViewer支持移动端,当屏幕不足够大时,只显示最基本的视图布局切换和影像图片导航功能(样例数据将不支持冠状面和矢状面)。

小屏幕移动端:

image

在实际使用DcmViewer时,比如打开一个真实的影像文件时,因同是纯客户端响应,加载速度将是秒级的。

二、打开一个影像文件

点击“文件”,然后选择“打开”,选择需要浏览的影像文件。

image

DcmViewer支持以下几种方式打开影像文件:

  1. 选择一个单一的DICOM影像文件
    选择一个以.dcm结尾的标准DICOM影像文件。
    image
  2. 选择多个DICOM影像文件
    同时选择多个以.dcm结尾的标准DICOM影像文件,建议选择的多个影像文件属于同一套影像。
    image
  3. 选择一个zip包
    事先把多个标准DICOM影像文件压缩成zip包,建议这些影像文件属于同一套影像, 然后选择这个以.zip结尾的zip包.
    image
    这个zip包的内容结构为:
    image

三、工具箱

点击工具箱旁边的收缩展开图标可以隐藏和展开工具箱。

image
image

1、视图布局

(1) 视图切换

DcmViewer提供三个面的视图 (3D视图)切换,分别支持:

冠状面 (coronal view):也就是额状面。
矢状面(sagittal view):将人体纵切为左、右两部分。
横切面(axial view):即水平面。

image

image

如,假设有一个大小为512*512的切片共10张,在内存中的存储情况如下图。

image

那么横断面、冠状面和矢状面的数据来源为:

(2)平滑显示

image
这项功能用来指示比例图像是否平滑,它本身就是Canvas API的一个属性, 当图片放大时,默认大小改变的算法可能造成像素模糊,通过改变此项属性,达到图像平滑的目的。具体参考: CanvasRenderingContext2D 属性

2、视图设置

(1) 窗位值设置

CT窗口技术是CT检查中用以观察人体不同密度组织的一种显示技术,包括窗宽(window width)和窗位(window level)。

DcmViewer 提供了一些基础的窗位设置下拉列表,如:

image

(2) 伪色彩设置

伪色彩设置,即伪彩色映射,通过将灰度图像转换为彩色图像,有效地增强某些特征的可视性。它通过将灰度图像中的像素值映射到特定的颜色来实现彩色显示。医学影像中的灰度图经常用于表示不同密度或强度的区域,通过伪彩色映射,这些区域可以在视觉上更容易被识别和分析。DcmViewer 通过使用查找表(Look-Up Table, LUT)将每个灰度值映射到一个RGB颜色, 可以突出显示或隐藏不同的特征或信息,例如组织结构、病变位置或血管分布等。

几个概念说明:

要在屏幕上显示DICOM影像,那么需要把原始图像数据经过一系列的转换,才能得到可直接在显示设备上显示的数据。

image

DcmViewer 提供以下几种伪色彩设置下拉框 - Plain(白片), InvPlain (反片) ,Rainbow, Hot, Hot Iron, PET, Hot Metal Blue 和 PET 20 Step,根据DICOM规范标准,定义红、绿、蓝颜色查找表(Red Palette Color Lookup Table Data),将上述VOl(Value Of Interest)值通过颜色查找表(Red Palette Color Lookup Table Data)赋色。

image

如,选择Hot Iron的效果:

image

(3) 影像图像快捷操作

DcmViewer提供对影像图像如下快捷操作:

image

“缩放”没被点亮时,鼠标的滚动用来导航(查看)至每张图像,当“缩放”被点亮时, 鼠标的滚动则用来缩放图像的大小。

(4) 影像图像导航

DcmViewer影像图像导航,是指通过按钮查看至每张图像。

image image

(5) 位置信息

DcmViewer 同时提供病人(屏幕)坐标和像素坐标的对照坐标信息。 当导航影像图像或者在影像图像上任意点击鼠标时,底部将显示病人(屏幕)坐标和像素坐标的对照坐标信息及对应点的VOl(Value Of Interest)值。

image

在病人(屏幕)坐标和像素坐标之间相互转换前,需要了解的几个DICOM元素(Tag):

  1. DICOM Tag (0020,0032) Image Position: 图像位置,指示了图像左上角的第一个像素的空间坐标 (x,y,z)。 也就是DICOM文件传输的第一个像素的坐标,3个浮点数值。

  2. DICOM Tag (0020,0037) Image Orientation: 图像方向,指示了图像第一行和第一列相对于病人的方向cosine(余弦值,包含6个浮点数值 "Xx, Xy, Xz, Yx, Yy, Yz"), 描述为3X3矩阵为:

    R=XxYxCxXyYyCyXzYzCzR = \begin{matrix} Xx & Yx & Cx \\ Xy & Yy & Cy \\ Xz & Yz & Cz \\ \end{matrix}

    其中 [C] = [X] x [Y] 的叉乘, 表示影像图像的堆叠方向, 用来判断横断面、冠状面和矢状面及图像导航时的方向。

    • 如果切片是垂直于病人坐标系的Z轴的, 即横断面,那么切片在z方向上的投影为0,此时Xz和Yz就是0;如果连切片的x、y方向跟病人坐标系都是一致,那么(0020,0037) Image Orientation就是 (1,0,0,0,1,0), 3X3矩阵为:
      R=100010001R = \begin{matrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \\ \end{matrix}

    • 如果切片是垂直于病人坐标系的y轴,即冠状面, 如果连切片的x、z方向跟病人坐标系都是一致, 则:

    R=100001010R = \begin{matrix} 1 & 0 & 0 \\ 0 & 0 & 1 \\ 0 & 1 & 0 \\ \end{matrix}

    • 如果切片是垂直于病人坐标系的X轴, 即矢状面,如果连切片的y、z方向跟病人坐标系都是一致, 则:

    R=001100010R = \begin{matrix} 0 & 0 & 1 \\ 1 & 0 & 0 \\ 0 & 1 & 0 \\ \end{matrix}

  3. DICOM Tag (0028,0030) Pixel Spacing: 像素间距, 一般是通过体模校正获得。

另外,坐标轴的方向是根据病人的方向来确定的(X轴指向病人的左手边,y轴指向病人的后面,Z轴指向病人的头部。

举例:

切片 m(黄色实线框):
0020,0032 Image Position (Patient): -99.8046875/-282.8046875/94.25
0020,0037 Image Orientation (Patient): 1/0/0/0/1/0

切片n(黄色虚线框):
0020,0032 Image Position (Patient): -99.8046875/-282.8046875/157.5
0020,0037 Image Orientation (Patient): 1/0/0/0/1/0

切片l(红色框):
假设了一个影像切片与病人坐标系不一致的情况,Image Position的6个值就是根据夹角(图中只标出了2个夹角)的cosine算出的, 分别为x在X上的cosine、y在X上的cosine、x在Y上的cosine、y在Y上的cosine、x在Z上的cosine和y在Z上的cosine。

上述举例数据用图形表示如下。

image

病人(屏幕)坐标和像素坐标之间的转换公式

根据 Image Position and Image Orientation DICOM 标准,将切片图像的像素点坐标表示为齐次形式(x,y,0,1),变换为病人坐标后是(x’,y’,z’,0),则:

image

举例说明:假设有一个大小为512 * 512 [ DICOM Tag (0028,0010)Rows 和 DICOM Tag(0028,0011)Columns] 的影像图像。

3、测量与绘制

(1) 颜色使用

在使用测量与绘制时,DcmViewer默认颜色为黄色。

image

如果需要使用其他的颜色,去掉勾选后,点击颜色框,弹出调色板,选择颜色即可。

image

(2) 测量工具

DcmViewer 基于 Konvajs Shapes 的基础图形开发,并提供以下的测量工具。

image

点亮按钮,在图像上拖动图标,即可画出所选按钮的形状及测量数据。 再次点击该按钮,取消点亮来取消绘制测量。

image

选中所画出的的形状,可以通过拖动来改变形状的大小及位置来调整测量。

image

选中所画出的的形状,将形状拖至X处,或按下delete键可以删除该形状。

image

测量与绘制只发生在当前的视图上,当使用影像导航至上一张或者下一张影像,再次返回,画出的形状及测量数据不会被清除。

4、颜色不透明区间设置

我们都知道, 表示颜色的RGBA参数用来描述颜色和透明度,四个字母分别对应红、绿、蓝三个颜色通道和一个透明度通道。每个参数通过数值组合决定最终的呈现效果。红绿蓝三个颜色通道取值范围为0到255,数值越大颜色越浓,透明度通道用0到1之间的小数表示,0代表完全透明,1代表完全不透明。比如RGBA(255,0,0,0.5)表示半透明的纯红色,RGBA(255,0,0,1)表示不透明的纯红色。

DcmViewer可以设置某个CT值区间,使在这个CT值区间之外的颜色透明,而在这个区间之内的颜色绝对的不透明。 滑动滑块可以改变CT值区间。

image

在2(1)中讲到, CT切片图像所有的CT值,拿样例举例,样例中一个CT值可表示为16位无符号整数,那么它代表的数可以覆盖的范围是 216=655362^{16}=65536, 如果一个CT值可表示为16位有符号整数, 那么它代表的数可以覆盖的范围是 -32768 到 32768。

比如,把样例中的颜色不透明区间设置为 100-32768。

image

则CT切片图像中CT值少于100的颜色将全部透明(即不显示),仅显示CT切片图像中CT值在100-32768之间的颜色。

image

5、对比度设置

参考2(1)来设置对比度,在2(1)中讲到了DcmViewer医疗影像系统中的窗宽(window width)/ 窗位(window level、窗中心、窗口级别)的设置, 可以通过下拉框选取一个窗宽(window width)/ 窗位(window level、窗中心、窗口级别),通过调整窗宽(window width)/ 窗位(window level、窗中心、窗口级别)值,来增加VOl(Value Of Interest)区域的图像信息的对比度。

image

6、影像图片透明度设置

DcmViewer医疗影像系统可以设置整个视图的透明度, 设置区间为0-1, 这将设置整张图片的透明度。

image

默认值为1, 即整张图片不透明, 可以通过拖动滑块来设置这个透明度的值, 如设置为0.3的效果如下:

image

四、技术支持与帮助

(1) 帮助文档

点击帮助图标, DcmViewer提供以下文档(链接)供参考。

image

(2) 技术支持

技术是无止境的,如有任何问题或者需要任何技术支持请联系 networkregister@126.com, 让我们一起探讨,一起完善, 一起成长!

tips: 技术支持邮箱:networkregister@126.com

三、工具箱

1、视图布局

2、视图设置

3、测量与绘制

四、技术支持与帮助