65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 LEADTOOLS 进行 HTML5 成像

LEADTOOLS 支持
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2012 年 8 月 7 日

CPOL

5分钟阅读

viewsIcon

49955

downloadIcon

925

我将展示如何将 HTML5 / JavaScript 查看器控件添加到网页，加载图像，并设置一些交互模式。

引言

零足迹成像应用程序部署的概念已经存在一段时间了，但随着越来越多的人依赖移动设备和平板电脑来处理日常任务，它正在重新流行起来。平台和操作系统的多样性日益增加，这带来了挑战。HTML5 中 Canvas 元素的采用成为了解决这个问题的完美方案，因为同一个应用程序可以同时运行在任何桌面、平板电脑或移动设备上，从而扩大了您的潜在客户群并降低了您的开发和支持工作。

LEADTOOLS 现在包含适用于文档和医疗成像的 JavaScript SDK。LEAD Technologies 20 多年来一直提供对最新成像技术的友好开发工具包。针对最新的移动设备和平板电脑的开发人员现在可以将 OCR、条形码、图像显示和处理、DICOM、PACS 等强大的成像技术掌握在客户手中。

LEADTOOLS SDK 中的关键 HTML5 和零足迹特性

  • 用于跨平台图像查看的 HTML5 / JavaScript 查看器控件
  • 适用于支持 HTML5 的任何桌面、平板电脑或移动设备浏览器
  • 支持鼠标和多点触控（手势）输入
  • 交互模式包括
    • 平移
    • Scale
    • 缩放至矩形
    • 中心点
    • 放大镜
    • 捏合缩放
  • 根据物理和逻辑单位显示图像
  • 内置图像处理功能
    • 旋转
    • Flip
    • 调整大小/缩放
  • 原生 HTML5 图像注释和标记
  • 通过 LEADTOOLS RESTful Web 服务进行扩展，以添加高级功能，例如扩展文件格式支持（例如 TIFF、PDF、DOC、DICOM 等）、OCR 和条形码。
  • 显示来自本地存档或任何远程 PACS 的具有窗口级别和元数据的 DICOM 图像
  • 包含源代码，便于定制和品牌化

包含 HTML5 技术的 SDK 产品

HTML5 代码

在下面的示例中，我将展示如何将 HTML5 / JavaScript 查看器控件添加到网页，加载图像，并设置一些交互模式。此外，我将使用 JSON 和图像格式 RESTful Web 服务来加载 PDF 等非 Web 格式。

HTML5 / JavaScript 查看器控件

HTML5 库底层使用的主要 HTML5 **对象**是 **Canvas**。结合 LEADTOOLS JavaScript 库，图像画布可以显示具有所有标准 UI 功能的图像，这些功能通常只能在丰富的客户端控件中看到，例如平移、缩放、放大镜、中心点等。所有这些交互模式在桌面、平板电脑和移动电话上都能完美运行，支持鼠标和多点触控手势输入（例如捏合缩放）。

要将查看器控件添加到 HTML 文档，只需一个包装 div 和几行在页面加载时运行的 JavaScript 代码，LEADTOOLS JavaScript 库就会处理其余的工作！

<head>
   <script type="text/javascript">
      run: function SiteLibrary_DefaultPage$run() {
         // Create the viewer
         var createOptions = new
Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
         _viewer = new Leadtools.Controls.ImageViewer(createOptions);

         // Set the image URL - load using browswer support
        
_viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg");
      },
   </script>
</head>
<body>
   <div id="imageViewerDiv" />
</body>

乍一看这似乎没什么大不了的，因为您可以使用标准的 <img> 标签加载 JPEG、PNG 或 GIF，将其包装在 <div> 中，这样您就拥有了一个带有滚动条的基本“图像查看器”。这就是交互模式发挥作用的地方，它为查看器提供了一些丰富的 UI 功能，例如放大镜，或者在触摸屏上（或鼠标上的 Ctrl + 单击）进行平移、捏合和缩放的能力。在向 HTML 添加按钮后，您必须在上面的 run 函数中修改一些事件处理程序，然后就可以使用了！

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
   // Set the interactive mode to PanZoom
   var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
   _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
 
var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
   // Set the interactive mode to MagnifyingGlass
   var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode();
   interactiveModeMagGlass.set_borderThickness(5);
   _viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);

RESTful Web 服务

REST 并不是一项新技术，因为它是 HTTP 1.0 和 1.1 的一部分，但许多 Web 应用程序随着时间的推移已经远离了它。然而，在使用零足迹、基于 HTML5 和 JavaScript 的客户端应用程序时，REST 是一个更好的选择，因为它与 JavaScript Object Notation (JSON) 交互简单。

LEADTOOLS 提供了用于图像格式（此处显示）、OCR、条形码和图像处理的 RESTful Web 服务。图像格式 Web 服务接受任何图像并将其转换为 Web 可显示格式，然后将其返回给查看器。这意味着您可以加载和显示 LEADTOOLS 支持的 150 多种格式中的任何一种。

您可以手动调用 REST 服务并解析 JSON 来获取图像信息，例如宽度、高度等。但这并不总是必要的，因为查看器可以通过简单地提供服务 URL 来为您完成所有工作。

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
   // This the image we want to load
   var imageUrl =
"http://demo.leadtools.com/images/pdf/leadtools.pdf";
   // Append it to the REST service Load method
   var restLoad =
"https:///LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
   // Set it into the viewer
            _viewer.set_imageUrl(restLoad);
},

结论

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

HTML5 和 RESTful Web 服务只是 LEADTOOLS 提供的众多技术之一。有关我们其他产品的更多信息，请务必访问我们的主页，下载免费的全功能评估 SDK，并在评估期间利用我们的免费技术支持。

下载完整的 HTML5 示例

您可以下载一个功能齐全的演示，其中包括上面讨论的功能。 要运行此示例，您需要以下内容

  • LEADTOOLS 免费 60 天试用版
  • 运行配置实用程序（C:\LEADTOOLS 17.5\Shortcuts\HTML5\01 Document\01 Local Demos\07 Run This First To Configure Demos and Services）以创建 HTML5 演示和 RESTful Web 服务的虚拟目录。
  • 将 LEADTOOLSHTML5RESTDemo.htm 复制到 C:\LEADTOOLS 17.5\Examples\JS\HTML5Demos（这是 https:///LEADTOOLSHTML5Demos 指向的位置）。
  • 如果加载托管在 IIS 中的图像，请确保为要支持的每种格式添加 MIME 类型（例如，.j2k = image/jpeg-2000，.dcm = image/dicom 等）。

支持

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

有关 LEADTOOLS HTML5 成像的更多信息

© . All rights reserved.