我们将为您展示如何将HTML5 / JavaScript查看器控件添加到一个web页面，如何加载一个图像并设置一些交互模式。
简介
零空间占用图像应用程序的概念已经出现了一段时间，越来越多的人在日常任务中开始依赖移动设备和平板电脑，这个概念又重新流行了起来。平台和操作系统的多样性是一个挑战。相同的应用程序会运行在任意的桌面、平板电脑或移动设备上，在HTML5中采用Canvas元素是这个问题的完美解决方案，同时增加了你的潜在客户群，减少了开发和支持的工作。
LEADTOOLS现在包括一个可用于文档和医学图像的JavaScript SDK。LEAD科技为程序员提供拥有最新图像技术的程序友好的开发工具包已经20多年。专注于最新移动设备和平板电脑的开发者现在可以将强大的图像技术如OCR、条码、图像显示和处理、DICOM、PACS等添加至移动app。
LEADTOOLS SDK中HTML5 DICOM查看器的主要功能
1. 跨平台图像查看的HTML5/JavaScript查看器控件
2. 可以运行在任意台式机、平板电脑或移动设备上，支持HTML5
3. 支持鼠标和多触控（手势）输入
4. 交互模式包括：
4.1. 平移
4.2. 缩放
4.3. 以矩形缩放
4.4. 中心
4.5. 放大镜
4.6. 拖放
5. 基于物理单元和逻辑单元的图像显示
6. 内置的图像操作：
6.1. 旋转
6.2. 翻转
6.3. 调整大小/缩放
7. 本地化的HTML5图像注释和标记
8. 扩展LEADTOOLS RESTful Web服务，添加高级功能如扩展的文件格式支持（如TIFF、PDF、DOC、DICOM等）、OCR和条码
9. 使用窗位和元数据从本地存档或任意远程PACS显示DICOM图像
10. 包含源码的功能完整的DICOM查看应用程序，易于定义和品牌化
包含HTML5技术的SDK产品
1. LEADTOOLS Document HTML5 Module
2. LEADTOOLS Medical 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("http://demo.leadtools.com/images/jpeg/cactus.jpg");
},
</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);
![clip_image001[4]](http://www.grapecity.com.cn/image.ashx?picture=clip_image001%5B4%5D.png "clip_image001[4]")
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 ="http://demo.leadtools.com/images/pdf/leadtools.pdf";
// 将它添加到REST服务加载方法中
var restLoad ="http://localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
// 在查看其中设置它
_viewer.set_imageUrl(restLoad);
},
总结
LEADTOOLS为开发者提供了全世界一流的稳定图像库，易于使用的高级编程接口让业务关键型应用程序的快速开发变为可能。
HTML5和RESTful Web服务只是LEADTOOLS提供的若干技术中的一个。若想了解我们产品的更多信息，欢迎访问我们的主页，下载功能完整的试用版SDK，在试用期间欢迎您使用我们的免费技术支持。
