LEADTOOLS JavaScript SDK使用教程：HTML5图像-控件新闻-慧都网

LEADTOOLS JavaScript SDK使用教程：HTML5图像

原创|使用教程|编辑：郝浩|2013-10-23 09:26:08.000|阅读 778 次

概述：LEADTOOLS JavaScript SDK提供了强大的移动设备和平板电脑成像技术。本文将展示如何添加 HTML5 / JavaScript查看器控件至Web页面，实现加载图像并设置一些交互模式。

零空间占用的成像应用程序概念由来已久，随着越来越多的人借助移动设备和平板电脑处理日常事务，零空间占用的成像应用程序重新流行起来。然而，平台和操作系统的日益多样化成为零空间占用成像应用程序的一大挑战。在HTML5中的 Canvas元素完美的解决了这个问题，因为同一应用程序可以运行于任何台式机，平板电脑或移动设备，从而增加你的潜在客户群，降低您的开发时间。

LEADTOOLS JavaScript SDK提供了强大的移动设备和平板电脑成像技术，如OCR，条形码，图像显示和处理，DICOM，PACS等。本文将展示如何添加 HTML5 / JavaScript查看器控件至Web页面，实现加载图像并设置一些交互模式。

LEADTOOLS JavaScript SDK关键功能：

HTML5/JavaScript查看器控件
用于开发适用于任何台式机、平板电脑及移动设备中跨平台应用程序的工具
支持在移动设备和平板电脑上进行多点触摸及各种手势操作
包含放大镜，平移，缩放等更多功能的交互式模式
基本的图像处理
本地HTML5图像注解和标记
零足迹部署为低带宽的客户端提供了快速的加载时间
使用LEADTOOLS RESTful Web服务扩展增加先进的功能，如扩展文件格式的支持（如TIFF，PDF格式，DOC），OCR和条码
DICOM图像显示
许多示例项目均提供源代码有助于开发工作的启动

HTML5 / JavaScript查看器控件

与LEADTOOLS JavaScript库结合使用，Cavas可以显示所有标准的UI功能，如放大、平移和缩放。所有这些交互式模式可以在台式机、平板电脑和手机上进行多点触摸及各种手势操作。下列代码展示了将HTML5 / JavaScript查看器控件添加到HTML文档：

<head>
<script type="text/javascript">
run: function SiteLibrary_DefaultPage$run() {
// Create the viewer
var createOptions = new
Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer');
_viewer = new Leadtools.Controls.ImageViewer(createOptions);

// Set the image URL - load using browswer support

_viewer.set_imageUrl("//demo.leadtools.com/images/jpeg/cactus.jpg");
},
</script>
</head>
<body>
<div id="imageViewerDiv" />
</body>

接下来，你需要添加一些事件处理程序：

var buttonPanZoom = document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
// Set the interactive mode to PanZoom
var interactiveModePanZoom = new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
_viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);

var buttonMagnify = document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
// Set the interactive mode to MagnifyingGlass
var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode();
interactiveModeMagGlass.set_borderThickness(5);
_viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);

RESTful Web Services

LEADTOOLS RESTful Web服务支持多种文件格式、条形码、OCR和图像处理。这意味着你可以加载和显示LEADTOOLS 所支持的150多种文件格式。

你可以调用REST服务和手动解析JSON以获取图像信息，如宽度，高度等。当然，这并不总是必要的，因为你只需要提供一个服务网址，查看器便可以为你完成所有的工作：

loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
// This the image we want to load
var imageUrl =
"//demo.leadtools.com/images/pdf/leadtools.pdf";
// Append it to the REST service Load method
var restLoad =
"//localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" +
imageUrl;
// Set it into the viewer
_viewer.set_imageUrl(restLoad);
},

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@wqylolg.cn

文章转载自：慧都控件网

上一篇：使用TX Text Control实现更实惠的PDF数字签名下一篇：思维导图软件MindManager for Windows教程：模版的使用