用于 DICOM 和 PACS 的 HTML5 零占位符查看器 – 第 2 部分
0/5 (0投票)
在本文中，我们将继续深入探讨 HTML5 DICOM 查看器，并更仔细地研究其客户端注释和标记。
引言
使用 HTML5 和 JavaScript 构建的完整精简版 DICOM 查看器还有许多重要方面。LEADTOOLS 最新的医学影像开发产品拥有这一切：图像显示、图像处理、快速客户端窗位调整、序列堆叠、注释等等。在我们第一篇文章中，我们介绍了该查看器并重点介绍了其 PACS 查询/检索和客户端窗位调整功能。在本文中，我们将继续深入探讨 HTML5 DICOM 查看器，并更仔细地研究其客户端注释和标记。
LEADTOOLS SDK 中的关键 HTML5 DICOM 查看器功能
- 用于跨平台图像查看的 HTML5 / JavaScript 查看器控件
- 支持鼠标和多点触控（手势）输入
- 用于窗位调整、序列堆叠、图像处理等的快速客户端工具
- 随时随地查看 DICOM 图像，无论是在您的桌面、平板电脑还是移动设备上，都可以通过 DICOM 通信从本地存档或远程 PACS 进行查看。
- RESTful Web 服务，用于执行查询/检索和以任何格式或压缩方式流式传输 DICOM 元数据和图像数据
- 原生 HTML5 图像注释和标记
- 有符号和无符号显示，用于扩展灰度图像
- 下载的图像数据的客户端缓存，用于快速重新加载和减少网络流量
- 功能齐全的 HTML5 DICOM 查看应用程序，包含源代码，便于自定义和品牌化
HTML5 DICOM 查看器代码
LEADTOOLS HTML5 精简版 DICOM 查看器是一个功能齐全的 AngularJS Web 应用程序，可直接与任何 PACS 集成，将 DICOM 图像流式传输到客户端。提供源代码，以便开发人员可以根据需要轻松修改、自定义和品牌化应用程序。下面将通过屏幕截图和代码片段解释一些关键功能，以说明该工具包的优势。
DICOM 图像的 HTML5 注释
一旦选择了 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 服务加载和保存注释
加载和保存注释的能力对于医学应用程序的工作流程至关重要。首先，它们有助于描述、指出或记录图像中的内容。最重要的信息仍然是图像本身，因此注释应该有一个简单的隐藏和恢复方法。DICOM 查看应用程序也是协作式的。放射科医生、护士、医生和患者都可以查看图像，并且通常需要获得第二意见，这使得在来回传递注释和标记的能力非常方便。最后，这是一个 Web 应用程序，因此应用程序的用户将需要从任何位置在任何计算机、移动设备或平板电脑上查看图像和注释。
LEADTOOLS 使用 RESTful Web 服务来加载和保存注释。如下图所示，第一步是获取描述（例如，“Brown 医生的笔记”、“John 请查看！”等）以及绘制注释的图像帧（SOP 实例 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 加载。
结论
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。