使用 LEADTOOLS 进行跨平台 HTML5 兼容的医学影像
4.80/5 (3投票s)
LEADTOOLS® HTML5 零足迹医学查看器有助于缩短开发人员构建支持 DICOM 的应用程序的学习曲线。它是快速开始构建可从任何设备访问的医学应用程序的完美方式。
DICOM 是存储和传输医学图像的标准。过去，查看 DICOM 只能通过需要安装在特定硬件和平台上的大型桌面客户端来实现。LEADTOOLS®，作为领先的影像 SDK 提供商，开发了一个零足迹 DICOM 查看器，可以在任何平台上的任何浏览器中使用，无需安装插件或本地软件。它是快速开发可部署到集中式服务器并随时随地访问的医学影像应用程序的完美方式。
DICOM 是在 20 世纪 80 年代中期开发的，旨在解决各种成像技术的问题。美国放射学院 (ACR) 和美国电气制造商协会 (NEMA) 于 1985 年创建了 ACR/NEMA 300 标准（有关背景信息，请参阅本文：https://uncch.pure.elsevier.com/en/publications/dicom-a-standard-for-medical-imaging）。此后进行了修订，自 1993 年起一直采用 3.0 版本，并进行了后续的扩展和修订。该标准的官方网页是：http://dicom.nema.org/。本文评测了这些工具，这些工具使得能够快速构建功能齐全、跨平台、跨浏览器的应用程序，并支持与 DICOM 图像的高级交互。
产品安装
您可以快速轻松地亲自试用该工具。导航到主网站：https://www.leadtools.com/，然后点击“下载”选项。展开“Raster, Document, and Medical Evaluation Downloads”，然后选择适合您平台的下载项。本文重点介绍 Windows 安装。
快速入门演示
下载并安装该工具后，只需几分钟即可运行，查看并与查看器控件进行交互。只需按照以下教程中的步骤操作即可。
该教程将引导您完成几个步骤，包括创建 HTML 页面、编写一些 JavaScript 以及复制一些文件，最终构建一个单页医学查看器应用程序。JavaScript 创建查看器控件，与服务器进行身份验证，然后将图像的 URI 设置为返回必要数据的服务调用。控件将处理其余部分！
您可以花些时间查看这个简单的示例。下载中包含一个更全面的项目，提供了一个完整的应用程序。
深入演示
该产品附带的工具需要一些先决条件，这些先决条件包含在产品自述文件中。具体来说，您应该有一个 IIS 服务器实例来运行 Web 应用程序，以及一个 SQL Server 实例来在 Windows 服务器上加载数据库。下载文件解压后包含数十个示例项目、文件和源代码。安装下载后，您可以从“开始”菜单中选择“LEADTOOLS Main Eval xx”（其中 xx 是版本；本文撰写时使用的是 19 版本）。导航到“DICOM”文件夹，然后到“JavaScript”文件夹。最后，打开“Medical Web Viewer”文件夹。
首次启动演示需要两个步骤。这些是文件夹中的快捷方式，用于设置您的环境。
第一步将验证您的数据库是否已配置。如果未配置，它将提示您连接到 SQL Server 并填充所需的数据库。完成此步骤后，您将看到一个用于驱动医学查看器演示的各种服务的对话框。
选择“配置”来设置服务并验证它们是否正常运行。随时点击“重新测试”以重新验证服务是否正在运行。请务必记下您设置的任何用户名和密码，因为稍后访问该工具时需要它们。
提示：如果您收到验证错误，请确保您的 SQL Server 实例正在运行，并且 LEADTOOLS® 服务也正在运行。
在验证您的服务已配置并正在运行时，请启动第二步。您可以根据需要多次运行此步骤，因为它每次运行时都会验证配置并执行任何必要的设置。通过单击“启动查看器”按钮，从对话框中运行查看器。
这将打开一个 Web 浏览器，并提示您使用之前配置的用户名和密码进行登录。
查看器演练
登录后，您可以搜索记录并调出相关图像。如您所见，该应用程序演示了比单页快速入门更高级的控件交互。
示例应用程序使用 Angular JavaScript 前端框架和 HTML5 Canvas 元素来渲染图像。完整的源代码作为评估下载的一部分提供。渲染此图像涉及几个组件。整个过程始于 JavaScript MedicalViewer 组件的实例。
在 Angular 中，指令是可重用组件，可将行为应用于 JavaScript 文档对象模型 (DOM) 并选择性地渲染基于 Web 的 UI。“LeadTools.MedicalViewer.Directive.ts”源代码（位于 Scripts/directives 文件夹中）定义了一个可重用的组件，该组件利用 MedicalViewer 控件。
此查看器实例可以传递到 API 类的构造函数中。该指令使应用程序更容易与查看器控件交互并修改配置。例如，该指令可以检测浏览器是否在移动设备上，并自动调整行和列以实现更好的匹配。
该指令附加到一个 HTML 元素。您可以在“Viewer.html”源（“Views”文件夹）中看到这一点。
虽然指令用于为操作提供目标，但需要一个控制器来协调这些操作。控制器决定正在查看哪个患者，并将正确的图像传递给指令。要检查此代码，请查看“Scripts”下的“Services”中的“TabService.ts”，它实例化了“Controllers”中的“ViewController.ts”的实例。
放大您的结果
在工具中，单击带有加号的放大镜，然后单击并滚动鼠标指针到画布上。您将看到放大效果。
医学查看器的指令使用了 MagnifyAction 控件。
当按下工具栏项时，控件将被激活。
cell.runCommand(MedicalViewerAction.Magnify);
如您所见，所有代码都是纯粹的、跨浏览器兼容的 JavaScript。
附加效果
示例应用程序还提供了其他效果的代码。所有效果都由单击相应的工具栏图标时生成的命令驱动。例如，一个效果允许您放大或缩小。
另一个效果允许您调整图像的窗口级别。下图显示了滚动三个不同级别后的结果。
通过检查“Scripts”文件夹下的“Services”中的“ToolbarService.ts”源，可以看到这些效果是如何加载到工具栏中的。以下是一些正在添加的选项：
按下一个项只是执行一个命令，该命令生成一个事件，控制器可以监听该事件以适当的方式与控件进行交互。
随时为您服务
JavaScript 控件提供了在浏览器中渲染和操作图像数据的完整解决方案，但应用程序的重要组成部分是提供数据的服务。要了解信息如何流式传输到客户端，请打开位于“Examples/DotNet/PACSFramework/MedicalWebViewer/Leadtools.Medical.WebViewer.WCF”路径下的“Leadtools.Medical.WebViewer.WCF_2”项目。它包含提供研究、布局和图像信息的服务的 .NET 代码。
对 DICOM 图像的典型请求如下所示：
获取研究布局
此调用检索有关研究的信息，包括子系列、行和列以及研究的相关图像数据。
获取系列缩略图
此调用返回一个缩略图，该缩略图可由浏览器渲染以预览研究。
获取系列堆栈
堆栈代表研究的一部分图像序列。这些具有唯一的引用号并在数据源中排序。以下示例是一个系列有两个实例的研究的响应。
获取系列布局
特定系列的布局具有名称、模板、图标以及属于该系列的图像。
获取图像瓦片
此调用检索用于渲染图像的实际数据。这些数据被传递给 JavaScript 控件进行渲染。它们以图像文件的形式传输，但由于格式中存储的额外数据，需要进行自定义处理和渲染。使用此文件，JavaScript 控件就拥有了渲染图像、平移、缩放、放大和根据需要调整级别的所需信息。
获取 DICOM JSON
最后一个调用以 JSON 格式检索 DICOM 图像的所有相关信息，以在客户端显示。
结论
DICOM 标准支持极其丰富的信息图像和相关元数据。LEADTOOLS® SDK 提供了前所未有的访问权限，可在所有设备上交付交互式体验。这得益于对 HTML5 和 JavaScript 标准的内置支持。示例应用程序演示了一个完整患者记录数据库，该数据库利用标准的基于 .NET 的 N 层应用程序实现，具有到 SQL Server 的数据访问层、Web 服务层以及利用 Angular 的前端单页应用程序 (SPA)。该示例提供了理解如何实例化和接口各种控件所需的一切。
有关进一步信息，您可以访问全面的在线文档。以下链接引用了 HTML5 和 JavaScript 的 WebView 概述：
LEADTOOLS® HTML5 零足迹医学查看器有助于缩短开发人员构建支持 DICOM 的应用程序的学习曲线。除了快速的跨平台支持外，SDK 还兼容支持触摸的设备和手势，处理图像处理，支持注释，并支持预定义和自定义布局。它是快速开始构建可从任何设备访问的医学应用程序的完美方式。