ImageViewer Object

Summary

Represents a scrollable control that displays one or more raster or SVG images and provides optional interactive UI operations.

Syntax

JavaScript Syntax
function lt.Controls.ImageViewer 
	implements IDisposable 
TypeScript Syntax
class lt.Controls.ImageViewer() 
	implements IDisposable 

Remarks

The LEADTOOLS ImageViewer class represents a control that displays one or more images and provides optional interactive UI operations. It can be used in single item applications like MS-Paint or multiple item applications like Adobe Acrobat.

  1. LEADTOOLS Main Demo uses an Image Viewer instance in single layout mode to view the main image

  2. LEADTOOLS Document Viewer Demo uses an Image Viewer instance in vertical layout to view thumbnails of pages

  3. And another Image Viewer instance with in double layout to view the main content

The ImageViewer class provides the following features:

  • Single or multiple items each with its own image data, size, and optional additional transformation

  • Built-in support to load raster images, SVG images, and documents, including directly loading remote URLs

  • Extensible layout system with built-in support for single, vertical and horizontal layouts

  • Rich, fully customizable and extensible user-interface that provides rich interactive tools such as pan, zoom, magnify glass, rubber band, and many more

  • Supports user input from both mouse and touch

  • Fully customizable appearance and position

  • Auto and custom scroll modes

  • Owner draw rendering

  • Viewing options include infinite zooming with size modes (fit, fit page, etc.), rotation at any angle, flip, reverse, color inversion, and low level transformation

  • High level item operations for hit-testing and to automatically go to a specific item or page

  • Drag and drop between the image viewer and external sources such as the file system or other image viewers instances

  • Provides floater image and region of interest functionality

  • Resample and scale-to-gray display interpolation

Refer to the following topics for more in-depth information on each group of features:

Example

This example will create an ImageViewer, set the interactive mode to Pan/Zoom, and add an image to the viewer. This example is used as the basis for examples for most other members in this namespace.

JavaScript Example
<!DOCTYPE html> 
<html> 
 
<head> 
   <title>Leadtools Examples</title> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <script type="text/javascript" src="Scripts/Leadtools.js"></script> 
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script> 
   <script type="text/javascript"> 
      // LEADTOOLS ImageViewer to be used with this example 
      var imageViewer = null; 
      // Generic state value used by the examples 
      var timesClicked = 0; 
 
      function example() { 
         // TODO: add example code here 
         alert("Run specific example code here!"); 
      }; 
 
      document.addEventListener("DOMContentLoaded", function () { 
         // Create an image viewer inside the imageViewerDiv element 
         var imageViewerDiv = document.getElementById("imageViewerDiv"); 
         var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
         imageViewer = new lt.Controls.ImageViewer(createOptions); 
         imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
         imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
         imageViewer.autoCreateCanvas = true; 
 
         // Add Pan/Zoom interactive mode 
         // Click and drag to pan, CTRL-Click and drag to zoom in and out 
         imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
         // Load an image 
         imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
         imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, imageViewer.defaultZoomOrigin); 
 
         exampleButton.addEventListener("click", function (e) { 
            timesClicked++; 
            // Run the example 
            example(); 
         }, false); 
      }); 
   </script> 
   <style> 
      body { 
         font-family: Arial; 
      } 
 
      button { 
         margin: 5px 0; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
</html> 

Requirements

Target Platforms

Help Version 20.0.2018.2.28
Products | Support | Contact Us | Copyright Notices
© 1991-2018 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly