CN103853530A - 在浏览器上快速显示医学图像的方法 - Google Patents

Abstract

本发明公开一种在浏览器上快速显示医学图像的方法，其包括步骤：将浏览器上用于显示DICOM医学图像的显示区域按照预设的分块长度分割成若干个分块区域，为每个分块区域创建一个图像对象并对图像对象进行URL设置；通过WADO协议计算DICOM医学图像对应显示在各个分块区域的分块图像的URL以及底层图像的URL；根据WADO请求参数加载各个分块图像和底层图像至浏览器，在浏览器上将各个分块图像作为上层图像显示在底层图像的上面；其中，将DICOM医学图像的窗宽、窗位、是否反色参数调整为与上层图像相同后，由浏览器从Web服务器请求加载获得底层图像。本发明提高了医学图像在浏览器加载速度，使对图像操作时图像显示更流畅。

Description

在浏览器上快速显示医学图像的方法

技术领域

本发明涉及一种医学图像显示技术，尤其是涉及一种使用多图层和图像分块技术在浏览器上快速显示医学图像的方法。

背景技术

医学图像分辨率较高，像素灰阶值通常不低于12位(Bit)4096级，而普通显示器由于动态范围有限，并受到操作系统限制，只能提供8Bit256级灰度，由于各种组织有相对稳定的取值，进行图像分割处理时只对特定范围内的像素值感兴趣，因此，处理系统必须能根据研究者的需要而显示特定像素值，屏蔽其它范围的像素值。

一般而言，该功能通过调节窗宽和窗位实现，调节窗宽和窗位是医学图像处理中用以观察不同密度的组织结构或病变的一种显示技术，调窗处理的原理是根据预知的窗宽和窗位值，获得需要显示的窗口的大小(窗宽)和中心位置(窗位)，从而将窗口内的值转换成显示时的最亮和最暗范围内的值，高于窗口灰度范围的部分置为最亮，低于窗口灰度范围部分设为最暗。调窗处理在数学表达上就是图像灰度值与显示值的转换，公式如下：

$G\left(V\right)=\left\{\begin{array}{cc}0,& V<C-\frac{W}{2}\\ \frac{g_m}{W}(V+\frac{W}{2}-C),& C-\frac{W}{2}\&le;V\&le;C+\frac{W}{2}\\ g_m,& V>C+\frac{W}{2}\end{array}\right.$

其中，v为图像数据，G(V)为显示器的显示值，gm为显示器的最大显示值，w为窗宽，c为窗位。在调窗处理中，窗宽(Window center)是指需要显示图像的范围，调节窗宽主要是影响显示对比度，窗宽越大，图像灰度层次多，组织对比度减少，细节显示差。窗位(Window center)表示显示区域的中心位置。

医学图像因其特殊性一直在浏览器上得不到很好的应用，DICOM标准提出了WADO(Web Access to DICOM Persistent Objects的简称)协议用于在Web上访问DICOM对象，通过向HTTP服务器传递指定参数来获得相应JPG格式图像，但是由于医学图像数据大和带宽的限制，导致图像加载缓慢，严重影响工作效率。

另外，Web+DICOM成为国际国内图像科室发放图像的潮流，使用浏览器浏览DICOM标准的医学影像，能满足一般要求。但是由于DICOM标准的医学影像数据量大，在现有带宽无法大幅度提升的情况下，使用Web浏览，容易造成DICOM标准的医学影像加载缓慢，严重影响到工作效率。

发明内容

本发明提出一种使用多图层和图像分块技术在浏览器上快速显示医学图像的方法，以解决目前医学图像在浏览器加载缓慢的技术问题。

本发明采用如下技术方案实现：一种在浏览器上快速显示医学图像的方法，其包括步骤：

将浏览器上用于显示DICOM医学图像的显示区域按照预设的分块长度分割成若干个分块区域，为每个分块区域创建一个图像对象并对图像对象进行URL设置；

通过WADO协议计算DICOM医学图像对应显示在各个分块区域的分块图像的URL以及底层图像的URL；

根据WADO请求参数加载各个分块图像和底层图像至浏览器，在浏览器上将各个分块图像作为上层图像显示在底层图像的上面；

其中，将DICOM医学图像的窗宽、窗位、是否反色参数调整为与上层图像相同后，由浏览器从Web服务器请求加载即获得底层图像。

其中，计算分块图像的URL以及底层图像的URL的步骤具体包括：

创建一个json数组cacheParam用来记录多个分块图像的图像属性，并创建一个json数组feintacheParamArr用来记录底层图像的属性；

根据json数组cacheParam记录得到底层图像相对于DICOM医学图像的左位移量ClipTop、上偏移量ClipLeft，根据浏览器显示区域得到对应的各个分块图像的宽ClipWidth、高ClipHeight，计算得到上层图像的各个分块图像的URL；

根据底层图像与上层图像、DICOM医学图像的特征关系计算出底层图像的URL。

其中，还包括步骤：

在获取到上层图像的各个分块图像的URL和底层图像的URL之后，创建两个img对象用来分别存放上层图像和底层图像；

设置两个img对象的index参数使底层图像是显示在上层图像的下面。

其中，将每个分块图像的WADO请求参数赋值给每个分块图像的img对象的src属性，浏览器自动根据各个分块图像的src属性向Web服务器请求各个分块区域对应的分块图像。

其中，将上层图像的URL和底层图像的URL通过Ajax方式传递给Web服务器的PHP脚本程序，由PHP脚本程序作为中转，开启WADO服务，并将WADO请求参数传递给WADO服务，WADO服务解析得到图像参数，由StudyUID、SeriesUID和SOPUID这三个参数通过Web服务器判断DICOM医学图像是否存在。

其中，若判断DICOM医学图像存在，则按照WADO请求参数中的窗宽、窗位、图像的宽高和是否反色将DICOM医学图像生成为第一JPG文件存放在内存中，并按照WADO请求参数中的分块长度和分块图像的参数，计算出分块图像是否还在DICOM医学图像中，如果是，则将分块图像拷贝到第二JPG文件中作为上层图像显示在浏览器中。

其中，若浏览器是第一次加载第二JPG文件，或者对上层图像进行改变窗宽、窗位或反色操作时，浏览器向Web服务器请求一个初始化大小与DICOM医学图像相同、但窗宽、窗位和是否反色参数和上层图像一样的底层图像。

其中，在浏览器上创建一个容器，将上层图像和底层图像放置在容器中并设置相对位移值。

其中，上层图像的各个分块图像相对于容器的位移量top和left都是为0，缩放倍数为1，而底层图像则需要根据缩放倍数和位移量来进行缩放操作和位移调正。

与现有技术相比，本发明具有如下有益效果：

本发明通过对医学图像分成多个显示区域的切块处理，只加载医学影像在显示区域的部分，而非显示区域部分不加载，减少了加载数据的数量，大大提高了加载的速度；另外，本发明通过设置上层图像与底层图像进行配合图像显示，提高了医学图像在浏览器加载速度，使对图像操作时图像显示更流畅。

附图说明

图1是本发明一个实施例的流程示意图；

图2是将医学图像分块处理的原理框图；

图3是医学图像分块处理的流程示意图；

图4是上层图像和底层图像的加载处理的流程示意图；

图5是浏览器显示上层图像的示意图；

图6是浏览器显示底层图像的示意图

图7是浏览器显示医学图像的示意图。

具体实施方式

下面以一个具体实例来详细描述使用多图层和图像分块技术在浏览器上快速显示医学图像的过程。

在本申请中，前端为Web浏览器(简称为“浏览器”)，后端为配置了PHP(超级文本预处理语言Hypertext Preprocessor的缩写)脚本程序的Web服务器(或服务端)，PHP脚本程序主要通过Web服务器转发由Web浏览器发送的请求参数生成相应的医学图像返回给浏览器。另外，由于PHP脚本程序无法处理二进制数据，故本实施例中开发了PHP扩展库专门用于解析DICOM医学图像，并在PHP脚本程序中进行了封装。有关PHP扩展库的内容将在后续实施例中一并描述。

另外，为了不引起混淆，需要特别说明的是：本申请文件的附图及说明书中所提及的“影像”与“医学图像”或“DICOM医学图像”，均为相同涵义。

如图1所示，本发明一个优先实施例包括如下实现步骤：

步骤S1、将Web浏览器上用于显示DICOM医学图像的显示区域按照预设的分块长度分割成N个分块区域。

如图2所示，为本发明处理医学图像分块并在Web上快速显示的原理框图中。其中，箭头线条表示的是处理流程。根据浏览器的显示区域在DICOM医学图像(以下简称为“医学图像”)上的位置，将所述显示区域按照预设的分块长度分割成N个分块区域，每个分块区域生成对应的URL，且为每个分块区域创建一个图像对象(或IMG对象)，对该IMG对象进行URL设置操作(SetURL)后，通过Ajax方式将参数传送到Web服务器，其流程如图3所示。

Web服务器通过PHP脚本程序接收参数后并启用WADO服务。

WADO服务解析接收到的参数，通过Web服务器(Web Server)取出分块区域对应的分块区域并返回到Web浏览器显示。

步骤S2、创建一个json数组cacheParam用来记录N个分别显示在各个分块区域的分块图像的图像属性、创建一个json数组feintacheParamArr用来记录底层图像的属性、创建一个″paenl″容器用来装载N个分块图像和底层图像。

其中，N个分块区域组成上层图像。

步骤S3、通过WADO协议计算分别显示各个分块图像的URL以及底层图像的URL。

请求参数包含请求的DICOM医学图像的StudyUID、SeriesUID、ImageUID、窗位wndCenter、窗宽wndWidth、图像高度Rows、图像宽度Columns、是否反色reverse、分块图像的宽度ClipWidth、分块图像的高度ClipHeight、分块图像相对应底层图像的位移量ClipTop，ClipLeft和请求类型ContentType。

定义变量url_prefix来记录访问地址不变的部分，假定Web服务器的PHP脚本程序为dicomimage.php，根据WADO协议的要求，则变量url_prefix为：url_prefix＝″/dicomimage.php？RequestType＝WADO&Studyuid＝″+StudyUID+″&seriesuid＝″+SeriesUID+″&imageuid＝″+ImageUID。

而DICOM医学图像的窗宽、窗位、高度、宽度、是否反色的参数值是从DICOM医学图像在缩放、移动、改变窗宽窗位、反色等浏览操作中记录在json数组cacheParam的值来赋值。

imgUrl＝url_prefix+″&Columns＝″cacheParam.width+″&Rows＝″cacheParam.height+″&wndCenter＝″cacheParam.wndWidth+″&wndWidth＝″cacheParam.wndCenter+″&reverse＝″cacheParam.colorReverse

根据json数组cacheParam记录得到底层图像相对于DICOM医学图像的左位移量ClipTop、上偏移量ClipLeft，根据Web浏览器显示区域得到对应的各个分块图像的宽ClipWidth、高ClipHeight，代码如下

var ClipTop  ＝-cacheParamArr.top；

var  ClipLeft＝-cacheParamArr.left；

ClientWidth＝document.body.clientWidth；

ClientHeight＝document.body.clientHeight；

var ClipWidth＝ClientWidth  -6；//6是宽度偏移量

var ClipHeight＝ClientHeight  -4；//4是高度偏移量

通过公式计算得到上层图像的各个分块图像的URL为：

imgUrl＝imgUrl+′&ClipWidth＝′+ClipWidth+′&ClipHeight＝′+ClipHeight+′&ClipTop＝′+ClipTop+′&ClipLeft＝′+ClipLeft+′&ContentType＝clip′；

而底层图像的URL与上层的分块图像的URL中关于窗宽、窗位、是否反色的参数值是一样的，底层图像的宽高度、分块图像的宽高度为初始化宽高度，切块相对原始的医学图像的位移量都为0，所以底层图像的URL为：Var DimageURL＝url_prefix+′&Columns＝′+ClipWidth+′&Rows＝′+ClipHeight+′&WindowCenter＝′+cacheParam.wndCenter+′&WindowWidth＝′+cacheParam.wndWidth+′&reverse＝′+reverse+′&ClipWidth＝′+ClipWidth+′&ClipHeight＝′+ClipHeight+′&ClipTop＝0&ClipLeft＝0′+′&ContentType＝clip′；

步骤S4、创建两个img对象用来分别存放上层图像和底层图像。

获取到上层图像的各个分块图像的URL和底层图像的URL，在这里创建两个img对象用来分别存放上层图像和底层图像，并将img对象存放在步骤S2创建的容器中，并设置两个img对象的index参数，保证上层图像是显示在最上面，而底层图像是显示在上层图像的下面。

index参数的设置如下：

var x＝document.createElement(′img′)；

var y＝document.createElement(′img′)；

x.style.left＝′0px′；

x.style.top＝′0px′；

x.style.width＝document.body.clientWidth+′px′；

x.style.height＝document.body.clientHeight+′px′；

步骤S5、根据WADO请求参数加载各个分块图像和底层图像。

在HTML标准中，图像image的src属性为图像地址，通过指定src属性的值来加载相应图像。本申请利用获取到上层图像和底层图像的WADO请求参数，以及步骤S4中创建的img对象，将每个分块图像WADO请求参数赋值给每个分块图像的img对象的src属性，Web浏览器会自动根据各个分块图像的src属性向Web服务器请求各个分块区域对应的分块图像：x.setSrc(imageUrl)；y.setSrc(DimageUrl)。

如图4所示，将上层图像的URL和底层图像的URL通过Ajax方式传递给Web服务器的PHP脚本程序，由PHP脚本程序作为中转，开启WADO服务，并将WADO请求参数传递给WADO服务，WADO服务解析得到图像参数，由StudyUID、SeriesUID和SOPUID这三个参数通过Web服务器判断DICOM医学图像是否存在：如果不存在，则返回“Block”字符串；如果存在，按照WADO请求参数中的窗宽、窗位、图像的宽高和是否反色将该张DICOM医学图像生成为一张第一JPG文件存放在内存中。按照参数中的分块长度和分块图像的参数，计算出分块图像是否还在医学图像中，如果不是，则返回“Block”字符串，如果是，则将该分块图像拷贝到一个第二JPG文件(或jpg文件)中作为上层图像，得到的结果如图5所示，并将该JPG文件返回并显示在Web浏览器中。在图像生成JPG文件并返回给Web浏览器时，对其进行了判断，若浏览器是第一次加载第二JPG文件，或者对上层图像进行改变窗宽、窗位或反色操作时，会去Web服务器请求一个初始化大小与请求的医学图像相同，但窗宽窗位、是否反色参数和上层图像一样的底层图像，得到的结果如图6所示。

因此，底层图像的请求方式和请求上层图像方式一样，都是通过WADO服务去Web服务器请求，其中图像请求的参数、窗宽窗位、图像的宽高和是否反色和上层图像的请求参数是一致的，但是底层图像的参数中分块长度和分块图像的参数是没有的，所以对底层图像的请求从Web服务器返回的是整幅医学图像，而不是医学图像的分块图像。

通过多图层技术，从Web服务器取回来的是两张医学图像，其中初始化大小的图像是放在底层，分块图像是放在上层。根据计算分别得到两张图像相对与容器的位移，将两张图像同时放置在容器中并设置相对位移值。

步骤S6、显示加载的各个分块图像和底层图像按照图像层级关系进行显示。

对于上层图像的各个分块图像来说，相对于容器的位移量top和left都是为0，缩放倍数为1。而底层图像则需要根据记录的缩放倍数和位移量来进行缩放操作和位移调正。

x.style.left＝′0px′；

x.style.top＝′0px′；

x.element.setStyle(′-webkit-transform′，′scale(1)′)；

y.style.left＝feintacheParamArr.left+′px′；

y.style.top＝feintacheParamArr.top+′px′；

y.element.setStyle(′-webkit-transform′，′scale(′+last_scale_array+′)′)；

最后显示的结果如图7所示。

在Web浏览器上对医学图像进行浏览操作时，当操作是改变窗宽窗位时，在操作过程中，只有上层图像发生窗宽窗位变化，当操作结束时，上层分块图片和底层图像分别去服务器请求新的图片。新请求来的上层图像想对于容器位移为0显示，底层申请的图片参数为初始化大小，窗宽窗位和反色参数和上层分块一样。请求到新的底层图像后，对新底层图像按照记录的缩放倍数和位移值进行缩放和位移改变。当操作是黑白反色时，结束操作和窗宽窗位操作是一样的。当操作是放大缩小，位移操作的时候，在操作过程中，底层图像和上层图像同事随操作放大缩小和位移，当操作结束时，分块的上层图像去服务器请求新的图片，新请求的上层图像相对与容器位移为0来显示，底层保存最后操作时大小位移不变。

综上，本发明通过对医学图像分成多个显示区域的切块处理，只加载医学影像在显示区域的部分，而非显示区域部分不加载，减少了加载数据的数量，大大提高了加载的速度；另外，本发明通过设置上层图像与底层图像进行配合图像显示，使对图像操作时图像显示效果更佳、更流畅。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种在浏览器上快速显示医学图像的方法，其特征在于，包括步骤：

将浏览器上用于显示DICOM医学图像的显示区域按照预设的分块长度分割成若干个分块区域，为每个分块区域创建一个图像对象并对图像对象进行URL设置；

通过WADO协议计算DICOM医学图像对应显示在各个分块区域的分块图像的URL以及底层图像的URL；

根据WADO请求参数加载各个分块图像和底层图像至浏览器，在浏览器上将各个分块图像作为上层图像显示在底层图像的上面；

其中，将DICOM医学图像的窗宽、窗位、是否反色参数调整为与上层图像相同后，由浏览器从Web服务器请求加载获得底层图像。

2.根据权利要求1所述在浏览器上快速显示医学图像的方法，其特征在于，计算分块图像的URL以及底层图像的URL的步骤具体包括：

创建一个json数组cacheParam用来记录多个分块图像的图像属性，并创建一个json数组feintacheParamArr用来记录底层图像的属性；

根据json数组cacheParam记录得到底层图像相对于DICOM医学图像的左位移量ClipTop、上偏移量ClipLeft，根据浏览器显示区域得到对应的各个分块图像的宽ClipWidth、高ClipHeight，计算得到上层图像的各个分块图像的URL；

根据底层图像与上层图像、DICOM医学图像的特征关系计算出底层图像的URL。

3.根据权利要求1所述在浏览器上快速显示医学图像的方法，其特征在于，还包括步骤：

在获取到上层图像的各个分块图像的URL和底层图像的URL之后，创建两个img对象用来分别存放上层图像和底层图像；

设置两个img对象的index参数使底层图像是显示在上层图像的下面。

4.根据权利要求1所述在浏览器上快速显示医学图像的方法，其特征在于，将每个分块图像的WADO请求参数赋值给每个分块图像的img对象的src属性，浏览器自动根据各个分块图像的src属性向Web服务器请求各个分块区域对应的分块图像。

5.根据权利要求1所述在浏览器上快速显示医学图像的方法，其特征在于，将上层图像的URL和底层图像的URL通过Ajax方式传递给Web服务器的PHP脚本程序，由PHP脚本程序作为中转，开启WADO服务，并将WADO请求参数传递给WADO服务，WADO服务解析得到图像参数，由StudyUID、SeriesUID和SOPUID这三个参数通过Web服务器判断DICOM医学图像是否存在。

6.根据权利要求5所述在浏览器上快速显示医学图像的方法，其特征在于，若判断DICOM医学图像存在，则按照WADO请求参数中的窗宽、窗位、图像的宽高和是否反色将DICOM医学图像生成为第一JPG文件存放在内存中，并按照WADO请求参数中的分块长度和分块图像的参数，计算出分块图像是否还在DICOM医学图像中，如果是，则将分块图像拷贝到第二JPG文件中作为上层图像显示在浏览器中。

7.根据权利要求6所述在浏览器上快速显示医学图像的方法，其特征在于，若浏览器是第一次加载第二JPG文件，或者对上层图像进行改变窗宽、窗位或反色操作时，浏览器向Web服务器请求一个初始化大小与DICOM医学图像相同、但窗宽、窗位和是否反色参数和上层图像一样的底层图像。

8.根据权利要求1-7所述在浏览器上快速显示医学图像的方法，其特征在于，在浏览器上创建一个容器，将上层图像和底层图像放置在容器中并设置相对位移值。

9.根据权利要求8所述在浏览器上快速显示医学图像的方法，其特征在于，上层图像的各个分块图像相对于容器的位移量top和left都是为0，缩放倍数为1，而底层图像则需要根据缩放倍数和位移量来进行缩放操作和位移调正。

Images