LeadTools 用于DICOM和PACS的HTML5零空间占用查看器 - Part 1

LEAD科技的HTML5和JavaScript控件为您提供了具有无与伦比速度和功能的跨平台、零空间占用的DICOM显示解决方案，可以运行在任何台式机、平板电脑和移动设备上。

简介

零空间占用应用程序的需求在快速增长，尤其是在医疗行业，平板电脑和移动设备在医疗行业广泛使用。有多种方式在网络上以零空间占用方式显示DICOM图像、与PACS通信，但是并非所有应用程序都是一样的。

任何的零空间占用应用程序有一大部分的工作需要在服务器上完成，但是这通常会导致功能和性能上的矛盾，开发者必须平衡它们。当简单部署并通过服务器端处理平台兼容问题时，经常会丢掉或减弱桌面或富客户端应用程序的性能和用户友好性。此外，DICOM图像中一般都是16位灰度图像数据，带来了独特的挑战。这些图像必须窗位化，以便正确显示在只能解释8位灰度数据的标准屏幕上。最常见的解决方案是使用AJAX给服务器发送窗位值，然后异步的拿回转化后的图像。然而这个方法很慢且反应迟钝，尤其是对于较大的图像。

LEADTOOLS是唯一提供完整16位灰度客户端窗位的医学图像SDK。LEAD科技的HTML5和JavaScript控件为您提供了具有无与伦比速度和功能的跨平台、零空间占用的DICOM显示解决方案，可以运行在任何台式机、平板电脑和移动设备上。

LEADTOOLS SDK 中HTML5 DICOM查看器的主要功能

跨平台图像查看的HTML5/JavaScript查看器控件
支持鼠标和多触控（手势）输入
用于窗位、系列堆栈、图像处理等的快速客户端工具
随时随地在你的台式机、平板电脑或移动设备上查看本地存档的或使用DICOM通信的远程PACS上的DICOM数据
本地化的HTML5图像注释和标记
扩展灰度图像的符号和无符号显示
下载图像数据的客户端缓存，加速重新下载、减少网络流量
包含源码的功能完整的DICOM查看应用程序，易于定义和品牌化

HTML5 DICOM查看器代码

LEADTOOLS HTML5零空间占用DICOM查看器是一个功能完整的AngularJS web应用程序，直接与任何的PACS集成，流化DICOM图像至客户端。我们为您提供了源码，这样开发者就能轻松修改、自定义和品牌化您的应用程序。在下面，你会看到主要功能的截图和代码片段，帮助您更好的了解工具包的好处。

使用RESTful Web Service查询和检索DICOM图像

服务器组件使用RESTful Web Service与本地存档或任意可以访问的远程PACS交互。这个服务处理所有的PACS通信（如C-Find、C-Move、 C-Store等），同时使用JSON与查看器控件交互。

在搜索存档并选择一个病人、研究和系列后，图像开始流到查看器。首先，服务器将发送一个立即显示的JPEG压缩图像，在后台，服务器流化窗位数据并保持系列堆栈中的图像帧。

使用AngularJS提供的MVC架构查询服务器非常简单。视图中的每个输入都与一个QueryOptions模型连接。然后，表单的搜索按钮连接到doSearch控制器上，这个控制器与数据库或远程PACS交互。此后，应用程序处理服务器响应，填充研究和系列列表。

$scope.doSearch = function () {
   // 获取输入的查询选项
   var queryOptions = angular.copy($scope.queryOptions);
 
   // 清空目前的搜索结果显示
   $scope.studies.length = 0;
 
   // 直接查询数据库或查询一个远程PACS
 switch ($scope.querySource.name) {
      case 'database':
         queryArchiveService.FindStudies(queryOptions, maxStudyResults).then(function (result) {
            eventService.publish("Search/Study/Success", result.data);
            $scope.studies = result.data; // 填充新结果
        }, function (error) {
            eventService.publish("Search/Study/Failure", { error: error });
         });
         break;
      case 'pacs':
         queryPacsService.FindStudies($scope.querySource.pacs, queryPacsService.clientAETitle, queryOptions).then(function (result) {
            eventService.publish("Search/Study/Success", result.data);
            $scope.studies = result.data; //填充新结果 
        }, function (error) {
            eventService.publish("Search/Study/Failure", { error: error });
         });
         break;
   }
};

客户端DICOM图像窗位

由于大多数DICOM数据集包含16位灰度图像数据，但是只能控制8位，因此窗位和最初的图像显示一样重要。为什么客户端的窗位如此重要？如果没有它，参数必须发送给服务器进行窗位，然后将图像转化为8位图像，返回给客户端。当图像尺寸变大同时医疗专业人员使用的硬件限制性更强（如手机和平板电脑）时，因为有大量的数据在服务器和客户端之间传递，性能会快速下降。LEADTOOLS使用无损压缩并存储在客户端缓存的方式流化DICOM图像数据，缓解了性能的下降。这种方式下，HTML查看器窗位交互模式可以解释鼠标和触控输入，在客户端重采样图像颜色，获得与桌面应用程序一样的速度和响应能力。

当查看选中的系列时，控制器会遍历所有的实例和框架，并将它们添加到单元格中。它会将DICOM数据设置到第一个单元格中，当有其他请求时流化剩余的图像。

DicomLoaderService.prototype.LoadImages = function (seriesInstanceUID, xmlData) {
   var instances = this._seriesManagerService.get_instances(seriesInstanceUID);
   var cell = this._seriesManagerService.get_seriesCell(seriesInstanceUID);
 
   for (var instanceIndex = 0; instanceIndex < instances.length; instanceIndex++) {
      var instance = instances[instanceIndex];
 
      for (var frameIndex = 0; frameIndex < instance.NumberOfFrames; frameIndex++) {
 
         // 如果是第一个实例，设置DICOM数据，否则设为
         cellFrame.DicomData = (instanceIndex == 0) ? xmlData : null;
         cellFrame.Instance = instance;
         cellFrame.enableDraw = true;
 
         cellFrame.add_imageDrawn($.proxy(this.OnImageDrawn, this));
      }
   }
 
   this._eventService.publish(EventNames.LoadingSeriesFrames, { seriesInstanceUID: seriesInstanceUID });
};

当这一切进行时，用户可能会注意到当图像第一次显示或滚动到视图中时，查看器窗位按钮的初始状态是不可用。在初次查看时，loadFrameData触发一个对服务器的异步请求，然后原始DIOCM图像数据开始流化到客户端，一两秒后，该按钮启用，同时显示一个标签，此标签展示了当前的窗位值。

DicomLoader.prototype.loadFrameData = function (cellFrame, dataSize, url) {
   var deferred = this._qService.defer();
 
   var dataReady = function (e) {
      cellFrame.remove_imageDataReady(dataReady);
      cellFrame.remove_imageDataError(dataError);
      deferred.resolve(e);
      this._eventService.publish(EventNames.ImageDataReady, { cellFrame: cellFrame });
   };
 
   cellFrame.add_imageDataReady(dataReady);
   cellFrame.setPNGDataSrc(url, dataSize.width, dataSize.height);
   return deferred.promise;
};