url Property (ImageViewerItem)

Summary

URL of image data associated with this item.

Syntax

JavaScript Syntax

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

TypeScript Syntax

url: string;

Property Value

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

Remarks

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 load, 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 result 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

JavaScript Example

var urls = ["http://localhost/myimages/layouttest/200by100_1.png", 
   "http://localhost/myimages/layouttest/200by100_2.png", 
   "http://localhost/myimages/layouttest/200by100_3.png", 
   "http://localhost/myimages/layouttest/100by200_1.png", 
   "http://localhost/myimages/layouttest/100by200_2.png", 
   "http://localhost/myimages/layouttest/100by200_3.png"]; 
 
var itemIndex = 0; 
this._imageViewer.beginTransform(); 
for (var urlIndex = 0; urlIndex < urls.length; urlIndex++) { 
   var item = new lt.Controls.ImageViewerItem(); 
   item.url = urls[urlIndex]; 
   item.text = "Item" + itemIndex; 
   this._imageViewer.items.add(item); 
   itemIndex++; 
} 
this._imageViewer.endTransform();