简介
对零空间占用应用的需求正在迅速增长，特别是在医疗健康行业，医疗健康供应商对平板电脑和移动设备的普及和使用日益增加。有多种方式可以以零空间占用的方式通过Web或Intranet显示DICOM影像并与PACS进行通信，但并不是所有应用程序都是相同类型的。
任何零占用的应用程序都必须在服务器上进行相当大量的处理工作，但这通常会导致开发人员必须找到适当的功能和性能的平衡。通过服务器端处理简化了部署要求和平台兼容性的同时，桌面或富客户机应用程序中的性能和用户友好性通常会丢失或下降。另外，因为DICOM图像通常是由16位灰度图像数据创建，因此存在特殊的问题。这些图像必须是窗位化的，以便能够在仅能解释8位灰度数据的标准屏幕上正确显示。最常见的解决方案是使用AJAX将窗位值发送到服务器，然后异步获取转换后的图像。不幸的是，这种方法是缓慢和迟钝的，特别是对于较大的图像。
LEADTOOLS HTML5零空间占用DICOM浏览器: 一个综合解决方案
LEADTOOLS使用能够支持窗位和处理16位灰度图像的高级JavaScript库来克服这些问题
在HTML5画布上。这种行业领先技术可以完全在客户端浏览器中运行，无需插件即可实现独特的用户体验。LEADTOOLS还提供了大量的客户端工具，包括图像堆栈，缩放，平移，放大镜，注释和标记，参考线，多帧布局，电影等。
LEADTOOLS HTML5零空间占用DICOM浏览器是一款功能齐全的AngularJS Web应用程序，可直接与任何PACS集成，将DICOM映像流式传输到客户端。 提供源代码，以便开发人员可以轻松地对应用程序按照他们自己的需求进行修改，自定义和品牌变更。
使用RESTful Web Service来查询和检索DICOM影像
服务器组件使用RESTful Web Service与本地PACS存档或有权访问的任何远程PACS进行连接。该服务处理所有PACS通信（即C-Find，C-Move，C-Store等），并使用JSON与浏览器控件进行连接。
在搜索档案并选择病人，检验和序列后，图像将开始流式传播给浏览器。首先，服务器将发送JPEG压缩图像以立即显示，并且在后台，服务器将窗位数据（下一节中将阐述更多细节）和序列堆栈中剩余的图像帧进行流式传输。
使用AngularJS提供的MVC架构，查询服务器非常简单。视图中的每个输入都与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;
};
HTML5标注用于DICOM影像
一旦选择了DICOM序列已经被选择，并且图像开始流向浏览器，注释就被初始化以供使用。 AnnAutomationManager对象被创建并附加到查看器。注释被赋予了自己的HTML5画布，它覆盖在查看器的顶层。这样就可以在与图像分开的图层中绘制注释，并提高效率，并降低在下面显示画布的损坏的可能性。
AnnAutomationManager的伟大之处在于它为您做了一切。所有事件都在内部处理，所以鼠标和触摸事件在用户与画布或注释对象交互的任何时间都能被正确地解释为绘制，修改，转换和缩放注释。另外，浏览器的显示属性（如缩放和滚动）被更改时，它将相应地重新缩放和翻译注释，使得注释在图像上保持在相同的逻辑位置。
要使用注释，下一步必须做的是选择要绘制的对象，或使用选择工具来修改现有的注释。在演示应用程序中，LEADTOOLS包含几个可以使用的注释工具的按钮。您可以启用或禁用尽可能多的，但LEADTOOLS使用在医疗保健行业（箭头，矩形，椭圆，文本，高光，标尺，聚尺和量角器）中最常用的注释来发布演示。下面的代码片段显示了几个按钮的Angular点击命令，来了解这么多功能仅需要很少的代码就可以完成。
commangular.command('OnAnnotationSelect', [
'toolbarService', 'tabService', 'buttonId',
function (toolbarService, tabService, buttonId) {
return {
execute: function () {
setAnnTool(toolbarService, tabService,
buttonId, MedicalViewerAction.AnnSelect);
}
};
}]);
commangular.command('OnAnnotationArrow', [
'toolbarService', 'tabService', 'buttonId',
function (toolbarService, tabService, buttonId) {
return {
execute: function () {
setAnnTool(toolbarService, tabService,
buttonId, MedicalViewerAction.AnnPointer);
}
};
}]);
commangular.command('OnAnnotationText', [
'toolbarService', 'tabService', 'buttonId',
function (toolbarService, tabService, buttonId) {
return {
execute: function () {
setAnnTool(toolbarService, tabService,
buttonId, MedicalViewerAction.AnnText);
}
};
}]);
使用Web Service来加载和保存标注
加载和保存注释的功能对于医疗应用的工作流程至关重要。首先，他们帮助描述，指出或记录图像中的某些东西。 最重要的信息仍然是图像本身，因此注释应该有一个简单的隐藏和显示的方法。 DICOM浏览应用是协同的。 放射科医师，护士，医生和患者都可以查看图像，经常需要获得多个意见，使得能够来回传递笔记和注释的功能非常方便。最后，这是一个Web应用程序，因此该应用程序的用户将可以在任何位置的任何计算机，移动设备或平板电脑上查看图像和注释。
LEADTOOLS使用RESTful Web服务来加载和保存注释。如下所示，第一步是获得描述（例如“布朗博士的笔记”，“约翰请回顾”等）和其上的图像框架绘制注释（SOP Instance UID）。将这两条信息传递给ObjectStoreService，该服务通过将注释数据保存到服务器的数据库来处理其余信息。
commangular.command('OnSaveAnnotations', [
'seriesManagerService', 'toolbarService', 'objectStoreService',
'authenticationService', '$modal', '$translate', 'dialogs', 'tabService',
'optionsService',
function (seriesManagerService, toolbarService, objectStoreService,
authenticationService, $modal, $translate, dialogs, tabService,
optionsService) {
return {
execute: function () {
var tab = tabService.get_allTabs()[tabService.activeTab];
if (toolbarService.isEnabled(“SaveAnn” + tab.id)) {
var cell = seriesManagerService.get_activeSeriesCell();
if (cell) {
// Save annotations to this series
var seriesInstanceUID = cell.get_seriesInstanceUID();
var annotationsData =
seriesManagerService.get_annotationsData(seriesInstanceUID);
if (annotationsData.length > 0) {
// Get description from user
var modalInstance = $modal.open({
templateUrl: 'views/dialogs/AnnotationsSave.html',
controller: Controllers.AnnotationsSaveController,
backdrop: 'static'
});
modalInstance.result.then(function (description) {
objectStoreService.StoreAnnotations(seriesInstanceUID,
annotationsData, description).then(function (result){
seriesManagerService.add_annotationID(
seriesInstanceUID, result.data);
dialogs.notify(notifyTitle, annotationsSaved);
});
});
}
}
}
}
};
}]);
加载图像帧时，应用程序执行快速权限检查，然后检索与图像相关联的先前保存的注释文件的数组。如果图像有注释，则启用加载按钮。 用户选择注释文件后，以下代码将从服务器获取注释数据，并将每个注释添加到画布。
commangular.command('OnLoadAnnotations', [
'seriesManagerService', 'toolbarService', '$modal', 'eventService',
'objectRetrieveService', '$translate', 'dialogs', 'tabService',
function (seriesManagerService, toolbarService, $modal, eventService,
objectRetrieveService, $translate, dialogs, tabService) {
return {
execute: function () {
var tab = tabService.get_allTabs()[tabService.activeTab];
if (toolbarService.isEnabled(“LoadAnn” + tab.id)) {
// Get annotations from this series
var seriesInstanceUID = seriesManagerService.get_activeSeriesCell().
get_seriesInstanceUID();
var annotations =
seriesManagerService.get_annotationIDs(seriesInstanceUID);
objectRetrieveService.GetPresentationAnnotations(sopInstanceUID,
'').then(function (result) {
if (result.status == 200) {
if (result.data && result.data.length > 0) {
var xmlAnnotations = $.parseXML(result.data);
seriesManagerService.add_annotations(seriesInstanceUID,
xmlAnnotations);
}
}
}, function (error) {
$translate('DIALOGS_ERROR').then(function (translation) {
dialogs.error(translation, error);
});
});
}
}
};
}]);
如下图中可以看到的，相同的图像和注释从iPhone完美载入。
结论
从PACS查询和检索DICOM图像并在强大的跨平台解决方案中查看它们只是您可以使用LEADTOOLS解决的许多现实解决方案之一。 其最先进的用于DICOM和PACS的HTML5 零空间占用浏览器框架可以提供前所未有的速度和响应能力，以准确地对DICOM图像进行窗位处理和注释，而不会牺牲医疗健康专业人员所需的任何功能。
