In This Topic ▼

url Property

Summary

URL of image data associated with this item.

Syntax

TypeScript

JavaScript

Object.defineProperty(ImageViewerItem.prototype, 'url', 
	get: function(), 
	set: function(value) 
)

url: string;

Property Value

The URL of the image associated with this item. The default value is null.

Remarks

A Url can be set in two ways:

Directly, to load a new image into the ImageViewerItem. This event is discussed in more detail below.
Internally, when an HTML Image Element is reloaded from its URL after coming in to view when AutoRemoveItemElements is true.

For instances where Image, Element, or Canvas is set and AutoRemoveItemElements is false, Url will be null.

The action taken when setting this value depends on whether the item is already a member of the ImageViewer (meaning it has been added to Items). If the item is not part of an image viewer, then the value of Url will be set with the new value and the actions described below will not occur until the item is added to an image viewer.

When this property is set externally to load a new image and the value is null, all previous image data is immediately deleted: Element, Image, and Canvas are all set to null, making the ImageViewerItem empty. The value of Resolution goes unchanged.

If the new value is not null, a new image will be loaded internally using ImageLoader. The value of LoadImageUrlMode will determine how the Url is loaded. The image load is performed asynchronously, and the UI will update when the image load has completed. The ImageLoading provides ways for the user to hook to the ImageLoader to modify any settings before the image load begins, including setting additional callbacks.

When the loading finishes (Image.load occurs), the Url property will be updated with the original value passed. Previous data in Image, Element, or Canvas will be deleted and replaced with the image object, depending on the type of image loaded with ImageLoaderUrlMode. The value of Resolution will also be updated with the value passed, if any. When this is done, ItemChanged will occur with information on the item and Reason set to ImageViewerItemChangedReason.Url.

If an error occurs during loading, ItemError will fire with information about the error. Url, Image, Canvas, and Resolution will not be updated and will still hold the original data.

Any image data supported by the browser can be used by the item. This includes JPEG, PNG, or SVG image data (directly), TIFF (Internet Explorer), or using the LEADTOOLS REST Services to return compatible image data from any type of document such as PDF or Microsoft Office Formats.

The value of AutoCreateCanvas will determine whether the Image or Canvas properties are updated. If this value is false (the default), then the img described above (or passed by the user) will be set in Image as is. If the value is true then an in-memory canvas is created and the img is rendered into this canvas and then discarded. The resulting canvas is stored in the Canvas property.

The ImageUrl property of ImageViewer will update this property of the ActiveItem when the viewer is used in single item mode.

For more information, refer to Image Viewer Items.

Example

This example creates a new item with a url.

Url.ts

ImageViewer.ts

Url.js

ImageViewer.js

Url.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItem_UrlExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      viewer.items.clear(); 
 
      const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
      item.url = "https://demo.leadtools.com/images/png/pngimage.png"; 
      viewer.items.add(item); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItem_UrlExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      viewer.items.clear(); 
 
      const item = new lt.Controls.ImageViewerItem(); 
      item.url = "https://demo.leadtools.com/images/png/pngimage.png"; 
      viewer.items.add(item); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Controls Example | Url</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</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> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewerItem.Url(); 
 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewerItem Class

ImageViewerItem Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 23.0.2024.2.29

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies