文檔金喜正規(guī)買球>>LEADTOOLS使用教程>>LEADTOOLS HTML5圖像教程

LEADTOOLS HTML5圖像教程

簡介

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

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

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

跨平臺圖像查看的HTML5/JavaScript查看器控件
可以運行在任意臺式機、平板電腦或移動設(shè)備上，支持HTML5
支持鼠標(biāo)和多觸控（手勢）輸入
交互模式包括：
- 平移
- 縮放
- 以矩形縮放
- 中心
- 放大鏡
- 拖放
基于物理單元和邏輯單元的圖像顯示
內(nèi)置的圖像操作：
- 旋轉(zhuǎn)
- 翻轉(zhuǎn)
- 調(diào)整大小/縮放
本地化的HTML5圖像注釋和標(biāo)記
擴展LEADTOOLS RESTful Web服務(wù)，添加高級功能如擴展的文件格式支持（如TIFF、PDF、DOC、DICOM等）、OCR和條碼
使用窗位和元數(shù)據(jù)從本地存檔或任意遠(yuǎn)程PACS顯示DICOM圖像
包含源碼的功能完整的DICOM查看應(yīng)用程序，易于定義和品牌化

包含HTML5技術(shù)的SDK產(chǎn)品

1. LEADTOOLS Document HTML5 Module

2. LEADTOOLS Medical HTML5 Module

3.LEADTOOLS Imaging HTML5 Module

HTML5代碼

在下面的例子中，我們將為您展示如何將HTML5 / JavaScript查看器控件添加到一個web頁面，如何加載一個圖像并設(shè)置一些交互模式。此外，我們將使用圖像格式RESTful web服務(wù)的JSON加載一個非web格式如PDF。

HTML5/JavaScript查看器控件

HTML5庫的主要HTML5對象是Canvas。與LEADTOOLS JavaScript庫結(jié)合，圖像畫布能夠以所有標(biāo)準(zhǔn)的UI功能顯示一個圖像，包括平移、縮放、放大鏡、中心等。所有的交互模式都可以在臺式機、平板電腦和手機上正常無縫工作，且支持鼠標(biāo)和多點觸控手勢輸入（如縮放）。

為了在一個HTML文檔中添加查看器控件，你需要的只是一個包裝器div和在頁面加載時運行的幾行JavaScript代碼，剩下的LEADTOOLS會幫你完成！

<head>
   <script type="text/javascript">
      run: function SiteLibrary_DefaultPage$run() {
         // 創(chuàng)建查看器
         var createOptions = new
Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
         _viewer = new Leadtools.Controls.ImageViewer(createOptions);
  
         // 設(shè)置圖像URL-使用瀏覽器支持加載        
_viewer.set_imageUrl("");
      },
   </script></head><body>
   <div id="imageViewerDiv" /></body>

你可以在標(biāo)準(zhǔn)<img>標(biāo)簽中加載一個JPEG、PNG 或GIF，在div中封裝，然后你就能擁有一個具有滾動條的基本“圖像查看器”。這就是交互模式起作用的地方，為查看器提供了豐富的UI功能如放大鏡以及在觸摸屏（或鼠標(biāo)上的Ctrl + Click）上平移、縮放的能力。在HTML中添加按鈕后，你必須修改事件處理器上的運行方法。

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
   // 將交互模式設(shè)置為PanZoom
   var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
   _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
  
var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
   // 將交互模式設(shè)置為MagnifyingGlass
   var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode();
   interactiveModeMagGlass.set_borderThickness(5);
   _viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);

RESTful Web服務(wù)

REST不是新技術(shù)，它是HTTP 1.0 和1.1的一部分，但是許多web應(yīng)用程序已經(jīng)遠(yuǎn)離了它。然而，當(dāng)使用零空間占用時，客戶端應(yīng)用程序使用HTML5和JavaScript，由于它能與 JavaScript對象注釋（JSON）進(jìn)行簡單交互，因此REST是一個更好的選擇。

LEADTOOLS為圖像格式（如下所示）、OCR、條碼和圖像處理提供了RESTful web服務(wù)。圖像格式web服務(wù)可以接收任意圖像，將它轉(zhuǎn)化為web可顯示的格式，然后將它返回給查看器。這意味著一個人可以加載和顯示LEADTOOLS支持的150多種格式中的任意一種。

你可以調(diào)用REST服務(wù)并手動解析JSON，獲取圖像信息如寬度、高度等。這也并不總是必要的，但是，查看器可以簡單的將它傳遞給服務(wù)URL，完成所有這些工作。

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
   // 這是我們想要加載的圖像
  var imageUrl ="";
   // 將它添加到REST服務(wù)加載方法中
  var restLoad ="//localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
   // 在查看器中設(shè)置它
           _viewer.set_imageUrl(restLoad);
},