LEADTOOLS HTML5图像教程-控件新闻-慧都网

LEADTOOLS HTML5图像教程

转帖|使用教程|编辑：龚雪|2015-12-18 09:55:44.000|阅读 495 次

概述：本文将展示如何将HTML5 / JavaScript查看器控件添加到一个web页面，如何加载一个图像并设置一些交互模式。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

跨平台图像查看的HTML5/JavaScript查看器控件
可以运行在任意台式机、平板电脑或移动设备上，支持HTML5
支持鼠标和多触控（手势）输入
交互模式包括：
- 平移
- 缩放
- 以矩形缩放
- 中心
- 放大镜
- 拖放
基于物理单元和逻辑单元的图像显示
内置的图像操作：
- 旋转
- 翻转
- 调整大小/缩放
本地化的HTML5图像注释和标记
扩展LEADTOOLS RESTful Web服务，添加高级功能如扩展的文件格式支持（如TIFF、PDF、DOC、DICOM等）、OCR和条码
使用窗位和元数据从本地存档或任意远程PACS显示DICOM图像
包含源码的功能完整的DICOM查看应用程序，易于定义和品牌化

包含HTML5技术的SDK产品

1. LEADTOOLS Document HTML5 Module

2. LEADTOOLS Medical HTML5 Module

3.LEADTOOLS Imaging HTML5 Module

HTML5代码

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

HTML5/JavaScript查看器控件

HTML5库的主要HTML5对象是Canvas。与LEADTOOLS JavaScript库结合，图像画布能够以所有标准的UI功能显示一个图像，包括平移、缩放、放大镜、中心等。所有的交互模式都可以在台式机、平板电脑和手机上正常无缝工作，且支持鼠标和多点触控手势输入（如缩放）。

为了在一个HTML文档中添加查看器控件，你需要的只是一个包装器div和在页面加载时运行的几行JavaScript代码，剩下的LEADTOOLS会帮你完成！

<head>
   <script type="text/javascript">
      run: function SiteLibrary_DefaultPage$run() {
         // 创建查看器
         var createOptions = new
Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
         _viewer = new Leadtools.Controls.ImageViewer(createOptions);
  
         // 设置图像URL-使用浏览器支持加载        
_viewer.set_imageUrl("");
      },
   </script></head><body>
   <div id="imageViewerDiv" /></body>

你可以在标准<img>标签中加载一个JPEG、PNG 或GIF，在div中封装，然后你就能拥有一个具有滚动条的基本“图像查看器”。这就是交互模式起作用的地方，为查看器提供了丰富的UI功能如放大镜以及在触摸屏（或鼠标上的Ctrl + Click）上平移、缩放的能力。在HTML中添加按钮后，你必须修改事件处理器上的运行方法。

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
   // 将交互模式设置为PanZoom
   var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
   _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
  
var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
   // 将交互模式设置为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，由于它能与 JavaScript对象注释（JSON）进行简单交互，因此REST是一个更好的选择。

LEADTOOLS为图像格式（如下所示）、OCR、条码和图像处理提供了RESTful web服务。图像格式web服务可以接收任意图像，将它转化为web可显示的格式，然后将它返回给查看器。这意味着一个人可以加载和显示LEADTOOLS支持的150多种格式中的任意一种。

你可以调用REST服务并手动解析JSON，获取图像信息如宽度、高度等。这也并不总是必要的，但是，查看器可以简单的将它传递给服务URL，完成所有这些工作。

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
   // 这是我们想要加载的图像
  var imageUrl ="";
   // 将它添加到REST服务加载方法中
  var restLoad ="//localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
   // 在查看器中设置它
           _viewer.set_imageUrl(restLoad);
},