LEADTOOLS HTML5图像教程

转帖|使用教程|编辑:龚雪|2015-12-18 09:55:44.000|阅读 249 次

概述:本文将展示如何将HTML5 / JavaScript查看器控件添加到一个web页面,如何加载一个图像并设置一些交互模式。

相关链接:

简介

零空间占用图像应用程序的概念已经出现了一段时间,越来越多的人在日常任务中开始依赖移动设备和平板电脑,这个概念又重新流行了起来。平台和操作系统的多样性是一个挑战。相同的应用程序会运行在任意的桌面、平板电脑或移动设备上,在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("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);
LEADTOOLSHTML5

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,在试用期间欢迎您使用我们的免费技术支持。

本文转自葡萄城产品博客

相关产品LEADTOOLS Document Imaging Developer Toolkit

             LEADTOOLS Medical Imaging Suite Developer Toolkit

             LEADTOOLS Imaging Pro Developer Toolkit

更多相关产品

购买最新正版授权!"咨询在线客服"

慧都年终盛典火爆开启,一年仅一次的最强促销,破冰钜惠不容错过!!优惠详情点击查看>>



标签:医疗图像图像处理文档图像

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
LEADTOOLS Imaging Pro Developer Toolkit

20多年的老牌图像处理控件,支持TWAIN扫描、200多种图像效果、150多种图像格式…

LEADTOOLS Document Imaging Suite Developer Toolkit

LEADTOOLS Document Imaging Suite SDK是LEADTOOLS SDK中各种特点的精选组合,这套强大的工具利用了LEAD行业领先的图像处理技术来智能地识别文档的特征,而根据文档的特征可以识别扫描的或传真的任何类型的表格图像。

LEADTOOLS Document Imaging Developer Toolkit

多语言的文档图像处理控件,支持光符识别处理、条形码扫描识别等。

LEADTOOLS Medical Imaging Developer Toolkit

LEADTOOLS Medical Imaging是一款医疗成像控件,包含了一些精心挑选的、经过优化的特性,可以满足医疗成像应用程序开发的特殊需要。

LEADTOOLS Medical Imaging Suite Developer Toolkit

LEADTOOLS Medical Imaging Suite帮您开发功能强大的PACS和医学成像应用程序

LEADTOOLS Multimedia Developer Toolkit

LEADTOOLS Multimedia SDK是一款功能强大的音频处理 / 视频处理控件,可创建具有专业水准的高品质的多媒体应用程序。

LEADTOOLS DVD Module

可以创建DVD影像,包括DVD影像接口,MPEG-2和MPEG-1 多路器,MPEG音频编码器,LEAD MPEG-2标准音频码

LEADTOOLS Medical Multimedia Module

可从一组同源的2D医疗影像来构建、查看、编辑3维体,并可用它包含的图像处理函数来提高可视化。

LEADTOOLS Streaming Module

LEADTOOLS Video Streaming Module是一个完美的解决方案,提供了一个非常卓越的多媒体工具包,同时利用 LEAD 视频和音频编码的优点可以减少需要的带宽。

LEADTOOLS Professional Asian OCR Module

LEADTOOLS Asian OCR Module在应用程序中增加了一些光学字符识别(OCR)技术的方法,并包含了开发健壮的,高性能的和可扩展的图像识别方案所需要的技术。

LEADTOOLS OCR Module - LEAD Engine

开发健壮的,高性能的和可扩展的图像识别方案所需要的OCR 识别技术。

LEADTOOLS OCR Module - OmniPage Engine

LEADTOOLS OCR Module - OmniPage Engine增加了对添加光学字符识别(OCR)和智能字符识别(ICR)技术到应用程序的方法,并且包含开发稳健的,高性能的和可扩展的图像识别解决方案所需要的一切。

LEADTOOLS ICR Module - OmniPage Engine

ICR Module - OmniPage Engine用于将ICR和OCR技术集成到应用程序中,并提供程序员强大,高性能,可扩展的图像识别解决方案。

LEADTOOLS Professional Arabic OCR Module

LEADTOOLS Arabic OCR Module增加了对添加光学字符识别(OCR)技术到应用程序的方法,并且包含开发稳健的,高性能的和可扩展的图像识别解决方案所需要的一切。

LEADTOOLS Recognition Imaging Developer Toolkit

条码图像识别开发包,帮您创建端到端文档图像应用程序的企业级文档自动化解决方案

LEADTOOLS PACS Imaging Developer Toolkit

开发功能强大的PACS Imaging应用程序的最佳选择

LEADTOOLS MPEG-2 Transport Module

包含DirectShow过滤器,用于创建和播放MPEG-2 传输和MPEG-2程序流,此外并能够从RTSP服务器产生流数据。

LEADTOOLS Document HTML5 Module

LEADTOOLS Document HTML5帮您开发强健、轻量级的跨平台文档图像处理应用程序。

LEADTOOLS Medical HTML5 Module

使用LEADTOOLS Medical HTML5 SDK Module开发下一代的DICOM和PACS图像处理应用程序。

LEADTOOLS Multimedia Suite Developer Toolkit

LEADTOOLS Multimedia SDK是专为开发各种跨行业音频/视频应用程序所设计的多媒体开发工具包。

LEADTOOLS Imaging HTML5 Module

LEADTOOLS Imaging HTML5 Module帮您开发强健、轻量级的跨平台图像应用程序

LEADTOOLS Barcode Pro Developer Toolkit

一款全面的可读写1D和2D条形码的软件开发工具包。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat