ImageUrl Property

Gets or sets the URL to the image to be displayed in the viewer.

Syntax

JavaScript

get_imageUrl();
set_imageUrl(value);
Object.defineProperty('imageUrl');

Property Value

Type	Description
string	The URL to the image to be displayed in the viewer. Default value is null.

Remarks

Changing the value of this property will fire the ImageChanged, PropertyChanged and TransformChanged events.

When you set a new value in ImageUrl, the viewer will create an internal HTML image element and tries to load the image data. On success, depending on the value of UseBackCanvas one of the following will occur:

When the value of UseBackCanvas is false, the created image element is saved into the BackImage property (BackCanvas is deleted if it has been created due to a previous operation and is set to null).

When the value of UseBackCanvas is true (the default), the BackCanvas canvas element is created and the image element is rendered (and potentially resized) into this background canvas and then deleted. BackImage will be set to null.

After that, ImageSize is set accordingly, the transformation matrix in Transform is re-calculated, ImageChanged event will fire and finally a render is requested. Refer to the Viewing an Image section of ImageViewer for more information.

To remove the image from the viewer, set ImageUrl to null.

ImageViewer can load the same image file formats supported by the current browser. So anything that can be loaded successfully with the following code can be set in ImageUrl:


            var imageElement = document.createElement("img");
            imageElement.src = url;

Most browsers support JPEG and PNG file formats. Some browsers, such as Internet Explorer, will support some flavors of the TIF and BMP file format. Use the LEADTOOLS REST Web Services to load any of the file formats supported by LEADTOOLS (including PDF, PDF/A, DOC/DOCX, any TIF, JPEG 2000 and more). Refer to the source code for the LEADTOOLS HTML 5 Viewer Demo for an example.

This is the same exact code that the ImageViewer will use when a new value is set into ImageUrl. An internal image element will be created and its load, error and readystatechange (Internet Explorer only) event will be hooked.

If the image is loaded successfully, the ImageChanged event will fire. Notice that putting an URL into ImageUrl will start the image loading operation and returns, you should wait for the ImageChanged event to perform any further actions. When ImageChanged is fired, the value of ImageSize will be set to the size of the loaded image in pixels.

In Internet Explorer only and while the image is being loaded, the HTML readystatechange will occur, this same event will be fired by the viewer in the ImageReadyStateChange event.

If the viewer cannot load the image (the HTML error event occurs), then the ImageError event will fire by the viewer.

Upon successful setting of a new image in the viewer, the transformation values will be reset back to the default values. Or Use the NewImageResetOptions property to stop some or all of the values from resetting.

When using a background canvas, the value of AutoScaleBackCanvas can be used to ensure that the whole image is viewable by potentially resizing the background canvas.

Example

This example will let the user enter an URL for the image to display. Enter valid image URLs and invalid ones to see how the viewer will catch the errors.

Copy and paste this example into your favorite text editor and save it into a folder on your disk with any name such as Default.htm. Inside that folder, create a directory with the name "Scripts". Copy the required .js files in the example from "LEADTOOLS Installation Folder\Bin\JS" to "Scripts". Finally open the HTML file in any browser that supports HTML 5.

JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Leadtools Examples</title>
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <style>
      #imageViewerDiv
      {
         border: 1px solid #000000;
         width: 800px;
         height: 800px;
         background-color: #7F7F7F;
      }
   </style>
   <script type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
   <script type="text/javascript">
      (function () {
         DefaultPage = function DefaultPage() {
         }

         DefaultPage.prototype = {

            run: function SiteLibrary_DefaultPage$run() {
               // Create the viewer
               var createOptions = new lt.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new lt.Controls.ImageViewer(createOptions);

               // Set the interactive mode to PanZoom
               var interactiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
               viewer.set_defaultInteractiveMode(interactiveMode);

               var loadButton = document.getElementById("loadButton");
               var _this = this;
               loadButton.addEventListener("click", function(e) {
                  // See if we have a URL in the text box
                  var urlTextBox = document.getElementById("urlTextBox");
                  var url = urlTextBox.value;

                  // Make sure it is not empty and not the same as the current URL in the viewer
                  if(url != "" && url != viewer.get_imageUrl()) {
                     // Attch to the ImageChanged and ImageError events of the viewer

                     // Create the event functions
                     var imageChanged = null;
                     var imageError = null;

                     imageChanged = function(sender, e) {
                        // Remove the events
                        viewer.remove_imageChanged(imageChanged);
                        viewer.remove_imageError(imageError);

                        alert("Image loaded OK");
                     };

                     imageError = function(sender, e) {
                        // Remove the events
                        viewer.remove_imageChanged(imageChanged);
                        viewer.remove_imageError(imageError);

                        // Get the image element
                        var imageElement = e.get_nativeElementEvent().srcElement;
                        alert("Error opening: " + imageElement.src);
                     };

                     // Now attach to the events
                     viewer.add_imageChanged(imageChanged);
                     viewer.add_imageError(imageError);

                     // And set the image URL
                     viewer.set_imageUrl(url);
                  }
               }, false);
            },

            dispose: function SiteLibrary_DefaultPage$dispose() {
            },
         }

         DefaultPage.registerClass("DefaultPage", null, ss.IDisposable);
         var page = null;
         var windowLoad = null;
         var windowUnload = null;
         windowLoad = function (e) {
            window.removeEventListener("load", windowLoad, false);
            page = new DefaultPage();
            page.run();
            window.addEventListener("unload", windowUnload, false);
         };
         windowUnload = function (e) {
            window.removeEventListener("unload", windowUnload, false);
            page.dispose();
         };
         window.addEventListener("load", windowLoad, false);
      })();
   </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>
      <input type="text" id="urlTextBox" />
      <input type="button" id="loadButton" value="Load" />
      <label id="exampleLabel" />
   </div>
   <div id="imageViewerDiv" />
</body>
</html>

ImageUrl Property

Property Value

Reference