文檔半島外圍網上直營>>LEADTOOLS使用教程>>LEADTOOLS HTML5圖像教程

LEADTOOLS HTML5圖像教程

簡介

零空間占用圖像應用程序的概念已經出現了一段時間，越來越多的人在日常任務中開始依賴移動設備和平板電腦，這個概念又重新流行了起來。平臺和操作系統的多樣性是一個挑戰。相同的應用程序會運行在任意的桌面、平板電腦或移動設備上，在HTML5中采用Canvas元素是這個問題的完美解決方案，同時增加了你的潛在客戶群，減少了開發和支持的工作。

LEADTOOLS現在包括一個可用于文檔和醫學圖像的JavaScript SDK。LEAD科技為程序員提供擁有最新圖像技術的程序友好的開發工具包已經20多年。專注于最新移動設備和平板電腦的開發者現在可以將強大的圖像技術如OCR、條碼、圖像顯示和處理、DICOM、PACS等添加至移動app。

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);
},