国产忧物42,二区三区四,亚洲综合伊

LEADTOOLS HTML5圖像教程

轉(zhuǎn)帖|使用教程|編輯：龔雪|2015-12-18 09:55:44.000|閱讀 549 次

概述：本文將展示如何將HTML5 / JavaScript查看器控件添加到一個(gè)web頁面，如何加載一個(gè)圖像并設(shè)置一些交互模式。

相關(guān)鏈接：

簡介

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

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

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

跨平臺圖像查看的HTML5/JavaScript查看器控件
可以運(yùn)行在任意臺式機(jī)、平板電腦或移動設(shè)備上，支持HTML5
支持鼠標(biāo)和多觸控（手勢）輸入
交互模式包括：
- 平移
- 縮放
- 以矩形縮放
- 中心
- 放大鏡
- 拖放
基于物理單元和邏輯單元的圖像顯示
內(nèi)置的圖像操作：
- 旋轉(zhuǎn)
- 翻轉(zhuǎn)
- 調(diào)整大小/縮放
本地化的HTML5圖像注釋和標(biāo)記
擴(kuò)展LEADTOOLS RESTful Web服務(wù)，添加高級功能如擴(kuò)展的文件格式支持（如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查看器控件添加到一個(gè)web頁面，如何加載一個(gè)圖像并設(shè)置一些交互模式。此外，我們將使用圖像格式RESTful web服務(wù)的JSON加載一個(gè)非web格式如PDF。

HTML5/JavaScript查看器控件

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

為了在一個(gè)HTML文檔中添加查看器控件，你需要的只是一個(gè)包裝器div和在頁面加載時(shí)運(yùn)行的幾行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)簽中加載一個(gè)JPEG、PNG 或GIF，在div中封裝，然后你就能擁有一個(gè)具有滾動條的基本“圖像查看器”。這就是交互模式起作用的地方，為查看器提供了豐富的UI功能如放大鏡以及在觸摸屏（或鼠標(biāo)上的Ctrl + Click）上平移、縮放的能力。在HTML中添加按鈕后，你必須修改事件處理器上的運(yùn)行方法。

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)使用零空間占用時(shí)，客戶端應(yīng)用程序使用HTML5和JavaScript，由于它能與 JavaScript對象注釋（JSON）進(jìn)行簡單交互，因此REST是一個(gè)更好的選擇。

LEADTOOLS為圖像格式（如下所示）、OCR、條碼和圖像處理提供了RESTful web服務(wù)。圖像格式web服務(wù)可以接收任意圖像，將它轉(zhuǎn)化為web可顯示的格式，然后將它返回給查看器。這意味著一個(gè)人可以加載和顯示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);
},

總結(jié)

LEADTOOLS為開發(fā)者提供了全世界一流的穩(wěn)定圖像庫，易于使用的高級編程接口讓業(yè)務(wù)關(guān)鍵型應(yīng)用程序的快速開發(fā)變?yōu)榭赡堋?/p>

HTML5和RESTful Web服務(wù)只是LEADTOOLS提供的若干技術(shù)中的一個(gè)。若想了解我們產(chǎn)品的更多信息，歡迎訪問我們的主頁，下載功能完整的試用版SDK，在試用期間歡迎您使用我們的免費(fèi)技術(shù)支持。

本文轉(zhuǎn)自

相關(guān)產(chǎn)品LEADTOOLS Document Imaging Developer Toolkit

LEADTOOLS Medical Imaging Suite Developer Toolkit

LEADTOOLS Imaging Pro Developer Toolkit

更多相關(guān)產(chǎn)品

購買最新正版授權(quán)！""

慧都年終盛典火爆開啟，一年僅一次的最強(qiáng)促銷，破冰鉅惠不容錯(cuò)過！！優(yōu)惠詳情點(diǎn)擊查看>>

標(biāo)簽：醫(yī)療圖像圖像處理文檔圖像

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：Stimulsoft Reports.Net開發(fā)者常見Q&A——報(bào)表預(yù)覽下一篇：C1DataGrid for WPF使用技巧之簡單數(shù)據(jù)綁定

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：位圖圖像處理

源碼：非開源

產(chǎn)品編號：10780

當(dāng)前版本：v23 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： LEADTOOLS

正式授權(quán)

">LEADTOOLS Imaging Pro Developer Toolkit

20多年的老牌圖像處理控件，支持TWAIN掃描、200多種圖像效果、150多種圖像格式…

控件

產(chǎn)品功能：位圖圖像處理

源碼：非開源

產(chǎn)品編號：10781

當(dāng)前版本：v23 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： LEADTOOLS

正式授權(quán)

">LEADTOOLS Document Suite Developer Toolkit

LEADTOOLS Document Imaging Suite SDK是LEADTOOLS SDK中各種特點(diǎn)的精選組合，這套強(qiáng)大的工具利用了LEAD行業(yè)領(lǐng)先的圖像處理技術(shù)來智能地識別文檔的特征，而根據(jù)文檔的特征可以識別掃描的或傳真的任何類型的表格圖像。

控件

產(chǎn)品功能：位圖圖像處理

源碼：非開源

產(chǎn)品編號：10782

當(dāng)前版本：v23 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： LEADTOOLS

正式授權(quán)

">LEADTOOLS Document Imaging Developer Toolkit

多語言的文檔圖像處理控件，支持光符識別處理、條形碼掃描識別等。

控件

產(chǎn)品功能：位圖圖像處理

源碼：非開源