• <menu id="w2i4a"></menu>
  •
    logo LEADTOOLS使用教程
    文檔首頁(yè)>>LEADTOOLS使用教程>>LEADTOOLS HTML5圖像教程

    LEADTOOLS HTML5圖像教程

    簡(jiǎn)介

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

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

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

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

    HTML5/JavaScript查看器控件

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

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

    <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("http://demo.leadtools.com/images/jpeg/cactus.jpg");
      },
   </script></head><body>
   <div id="imageViewerDiv" /></body>

    你可以在標(biāo)準(zhǔn)<img>標(biāo)簽中加載一個(gè)JPEG、PNG 或GIF，在div中封裝，然后你就能擁有一個(gè)具有滾動(dòng)條的基本“圖像查看器”。這就是交互模式起作用的地方，為查看器提供了豐富的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);
    LEADTOOLSHTML5

    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對(duì)象注釋（JSON）進(jìn)行簡(jiǎn)單交互，因此REST是一個(gè)更好的選擇。

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

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

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

    總結(jié)

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

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

    本文轉(zhuǎn)自葡萄城產(chǎ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)品

    購(gòu)買最新正版授權(quán)！"咨詢?cè)诰€客服"

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

    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();