Canvas与DICOM图像处理

不知不觉中,2016的新年都已经过完了,我们的DICOM HTML5 Viwer技术揭秘系列却一直没有继续跟进。对此我只能说非常惭愧,前段时间把绝大多数的时间和精力都用在了浏览器端HTML5实现的MPR 3D阅片上,所以这个系列一直拖到了现在才能有所更新。

 

言归正传,前文提到在的HTML5标准出来之前,市面上也有所谓的Web版的PACS,要么是使用ActiveX或者Flash之类的插件技术的伪WebPACS,要么就是在服务器端生成图片传给浏览器显示。后者的确算是纯Web版的PACS,但是后者的响应速度实在是让人难以接受。

 

2010年左右HTML5技术出现,全世界兴起了一股以HTML5技术实现纯Web版的PACS Viewer的热潮,这是为什么呢?这是因为今天要给大家重点介绍的主角Canvas,给大家带来了在浏览器中不依赖插件进行图像处理,特别是DICOM图像的窗宽床位调整的可能。

 

Canvas的图像处理能力

         熟悉Web编程的朋友都知道,在HTML5出现之前,HTML标准里只有一个IMG元素可以用来显示图像,但是这个元素也只能是用来显示图像,最多可以通过一些脚本控制来达到放大缩小的效果,对于图像的进行逐个像素的处理是无能为力的。除此之外,业界还有一些不流行的如SVGScalable Vector Graphics的简称)标准可以用来在网页里画一些点线面的几何图,但是也缺乏对已有图像的逐像素的处理能力。

        

         为了克服WebHTML标准的这些弱项,在HTML标准的第五个版本里,即HTML5,特意添加了一个叫做Canvas的元素。Canvas的中文翻译一般译作画布,功能和他的名字一样,支持广大的程序员们在网页里用程序去绘制文本、线条、矩形、圆形等图形,也可以直接把已有的图像直接绘制出来。更为令人兴奋的是,Canvas还支持直接获取或者设置单个显示点的颜色值,这就是前面所说的逐像素的处理能力,这也是在浏览器中实现DICOM图像的窗宽床位调整的根本能力。除此之外,Canvas还直接支持图像的放大和缩小,旋转等处理。

         因为本文不是教会程序员们如何在Canvas编程的教程,所以详细的编程细节在这里就不详细的介绍了。如果有感兴趣的朋友,请参见附件里的参考资料的链接。

 

CanvasDICOM图像处理

         我们知道DICOM影像的,主要都是一张或者多张(multiframe)的“图片”。其中“图片”的每个点的原始值(即“像素值”),对应X光和MRI时的含义不太相同,但在显示时的处理方式基本是相同的。在显示DICOM图像的时候,都是取出每个点的原始值(像素值),然后根据图像显示的窗宽(window width)和窗位(Window center)值,应用DICOM标准规定的公式变换后取得。变换公式如下图所示,图中x表示原始的像素值,w表示窗宽,c表示窗位,y是最终的显示值,yminymax分别是最大和最小的显示值。

熟悉编程的朋友看到这里,一定可以拿出一门自己熟悉的语言,根据上面的公式快速的编写出一个DICOM图像处理的函数了。但是不要着急,你看到的未必就是最好的实现方式。在直接使用公式进行图像变换计算的方法之上,还有一种我称之为查表法的优化的计算方法:既然已知窗宽和窗位,那么我们可以先计算出有效的像素值对应的显示值,并把原始值和显示值存储在一个数组(表)里;拿到实际的原始像素值后,首先判断是不是一个有效的像素值,如果是有效的像素值则直接从表里取出显示值即可。这里的“有效的像素值”是指以窗位为中心,加上或者减去窗宽的一半的值范围内的值,即不满足上图中第一个和第二个条件判断的原始像素值。由于在计算机里乘法和除法的性能消耗远比数组查找大的多,因此此算法比DICOM标准注明的标准算法效率高的多。

再说回来,Canvas怎么处理DICOM图像,特别是根据窗宽和窗位进行图像处理呢?其处理的方式和就是我们上面所讲的方式。首先把DICOM图像的原始像素值加载到网页脚本中,然后逐个点(像素)的根绝窗宽和窗位计算最终的显示值,然后将处理完成后的得到的完整显示值组成的图像通过CanvasputImageData接口显示在Canvas上即可。如果用户需要调整显示的窗宽和窗位,则需要把这个计算过程重新执行一遍再显示在Canvas上。至于怎么把图像的像素值加载到网页脚本中,请期待“DICOM HTML5 Viwer技术揭秘系列之四-图像加载与缓存”为您继续揭秘。

 

一般来说,DICOM都是512X512大小或者更大的图像,每次图像处理的计算工作量都是非常巨大的工作量。如果应用查表法,则可以大大的减少图像处理的性能消耗,大大的提高用户操作的响应时间,基本上杜绝了用户调窗后图像显示滞后带来的卡顿感。这也算是我们在这个系列里的揭秘的第一个硬货,也算是给一直支持我们的朋友的一个福利吧。

参考资料

关于Canvas对象的能力的详细介绍,推荐一个W3School的教程和参考:

1.         Canvas对象教程:http://www.w3school.com.cn/tags/tag_canvas.asp

2.         Canvas对象参考:http://www.w3school.com.cn/tags/html_ref_canvas.asp

 

关于DICOM HTML5Canvas上的图像处理,业界有两个比较知名和流行的开源库

1.         Oviyam 2.0:完整的实现了DICOM图像的加载和显示的一个老牌开源库

a)         公司网站在这里:http://oviyam.raster.in/index.html

b)         源代码在这里:https://sourceforge.net/projects/dcm4che/files/Oviyam/

2.         Cornerstone js:一个比较新的专注于JS实现DICOM图像处理的库,想要的信息都在这里:https://github.com/chafey/cornerstone

 

更多信息敬请关注微信/新浪微博:@微至云动云影像。 或请访问微至云动云影像的官方网站http://www.weiyunyingxiang.com