产品展示 HTML5 中级开发 Javascript

用于 DICOM 和 PACS 的 HTML5 零占位符查看器

LEADTOOLS 支持

0/5 (0投票)

2012 年 8 月 7 日

CPOL

6分钟阅读

70788

LEAD 的 HTML5 和 JavaScript 查看器控件在跨平台、零占用的 DICOM 查看解决方案中提供无与伦比的速度和功能，该解决方案可以在任何桌面、平板电脑或移动设备上运行。

引言

零占用应用程序的需求正在迅速增长，尤其是在医疗保健行业，医疗保健提供者越来越多地使用平板电脑和移动设备。有许多方法可以在零占用模式下通过 Web 或内网显示 DICOM 图像并与 PACS 进行通信，但并非所有应用程序都同样出色。

任何零占用应用程序都必须在服务器端完成大量工作，但这通常会导致功能和性能上的权衡，开发人员必须在其中找到适当的平衡。通过服务器端处理简化部署和平台兼容性时，通常会丢失或降低桌面或富客户端应用程序的性能和用户友好性。此外，DICOM 图像由于其中通常包含的 16 位灰度图像数据而带来独特的挑战。必须对这些图像进行窗位调整，才能在仅能解释 8 位灰度数据的标准屏幕上正确显示。最常见的解决方案是使用 AJAX 将窗位值发送到服务器，然后异步获取转换后的图像。不幸的是，这种方法速度很慢，响应迟钝，尤其是在处理大型图像时。

LEADTOOLS 是唯一提供完整 16 位灰度客户端侧窗位调整的医疗成像 SDK。LEAD 的 HTML5 和 JavaScript 查看器控件在跨平台、零占用的 DICOM 查看解决方案中提供无与伦比的速度和功能，该解决方案可以在任何桌面、平板电脑或移动设备上运行。

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

用于跨平台图像查看的 HTML5 / JavaScript 查看器控件
支持鼠标和多点触控（手势）输入
用于窗位调整、序列堆栈、图像处理等的快速客户端侧工具
在您的桌面、平板电脑或移动设备上，随时随地查看 DICOM 图像，来自您的本地存档或使用 DICOM 通信的远程 PACS
用于以任何格式或压缩方式执行查询/检索和流式传输 DICOM 元数据和图像数据的 RESTful Web 服务
原生 HTML5 图像注释和标记
有符号和无符号显示，适用于扩展灰度图像
下载的图像数据的客户端缓存，用于快速重新加载和减少网络流量
功能齐全的 HTML5 DICOM 查看应用程序（带源代码），便于自定义和品牌化

HTML5 DICOM 查看器代码

LEADTOOLS HTML5 零占用 DICOM 查看器是一个功能齐全的 AngularJS Web 应用程序，可直接与任何 PACS 集成，将 DICOM 图像流式传输到客户端。提供源代码，以便开发人员可以根据需要轻松地对应用程序进行修改、自定义和品牌更改。在以下内容中，将通过屏幕截图和代码片段来解释一些关键功能，以说明该工具包的优势。

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

服务器组件使用 RESTful Web 服务与本地存档或您可以访问的任何远程 PACS 进行接口。该服务处理所有 PACS 通信（例如 C-Find、C-Move、C-Store 等），并使用 JSON 与查看器控件进行接口。

搜索存档并选择患者、检查和序列后，图像将开始流式传输到查看器。首先，服务器将发送一个 JPEG 压缩图像以立即显示，然后在后台流式传输窗位数据（更多详细信息将在下一节中介绍）和序列中的其余图像帧。

借助 AngularJS 提供的 MVC 架构，查询服务器非常简单。视图中的每个 input 都绑定到 QueryOptions 模型。然后，表单的搜索按钮绑定到下面代码片段中所示的 doSearch 控制器函数，该函数与数据库或远程 PACS 进行交互。之后，应用程序处理传入的服务器响应，并填充检查和序列列表。

$scope.doSearch = function () {
   // Get query options from inputs
   var queryOptions = angular.copy($scope.queryOptions);

   // Empty the currently displayed search results
   $scope.studies.length = 0;

   // Query the database directly or a remote 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; // Populate the new results
         }, 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; // Populate the new results
         }, function (error) {
            eventService.publish("Search/Study/Failure", { error: error });
         });
         break;
   }
};

客户端侧 DICOM 图像窗位调整

由于大多数 DICOM 数据集包含 16 位灰度图像数据，而显示器仅显示 8 位，因此窗位调整与初始图像显示同等重要。为什么客户端侧窗位调整如此重要？如果没有它，必须将参数发送到服务器，由服务器进行窗位调整，将其转换为 8 位图像，然后将其返回给客户端。随着图像变大，并且医疗保健专业人员使用移动电话和平板电脑等更受限制的硬件，大量数据在服务器和客户端之间传输会导致性能迅速下降。

LEADTOOLS 通过使用无损压缩流式传输原始 DICOM 图像数据并将其存储在客户端缓存中，从而缓解了这种性能下降。这样，HTML5 查看器的窗位调整交互模式就可以解释鼠标或触摸输入，并在客户端侧重新采样图像颜色，从而获得与桌面应用程序相同的速度和响应能力。

选择一个序列进行查看时，控制器将遍历所有实例和帧，并将它们添加到单元格中。它将为第一个单元格设置 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++) {

         // Set the DICOM data if this is the first instance, otherwise null
         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 会触发到服务器的异步请求，原始 DICOM 图像数据开始流式传输到客户端，一两秒钟后，按钮将被启用，并显示一个标签，显示当前的窗位值。

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;
};

结论

LEADTOOLS 通过易于使用的高级编程接口，为开发人员提供了世界上性能最佳、最稳定的成像库的访问权限，从而能够快速开发关键业务应用程序。

零占用 HTML5 DICOM 查看器只是 LEADTOOLS 提供的众多技术之一。有关我们其他产品的更多信息，请务必访问我们的主页，下载一个功能齐全的免费评估 SDK，并在评估期间享受我们的免费技术支持。

下载完整的 HTML5 DICOM 查看器示例

要开始使用此示例，您可以在线预览，它托管在我们的网站上。或者，您可以下载一个功能齐全的演示，其中包含上述功能。要运行此示例，您需要以下条件：

LEADTOOLS 免费 60 天试用版
浏览到 C:\LEADTOOLS 19\Shortcuts\DICOM\JavaScript
执行“01 - 首先运行此程序以配置演示和服务器”
浏览到 Medical Web Viewer 文件夹并执行“02 - Medical Web Viewer 32 位演示”，如果需要纠正数据库和 IIS 要求之间的版本差异，请单击“修复问题”。

支持

需要帮助才能使此示例正常运行？联系我们的支持团队以获得免费技术支持！有关定价或许可问题，您可以联系我们的销售团队（sales@leadtools.com）或致电 704-332-5532。