ImageUrl Property

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

Syntax

JavaScript
WinRT JavaScript

  get_imageUrl();
 set_imageUrl(value);

!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

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, the background canvas is created and populated with the image data. 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 browser such as Internet Explorer will support some flavors of the TIF and BMP file format. You can 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 so more more. Refer to source code of the LEADTOOLS HTML 5 Viewer Demo for an example.

This the same exact code ImageViewer will use when a new value is set into ImageUrl, an internal image element will be created and its load, error and readystatechange event will be hooked.

If the image is loaded successfully, the ImageChanged event will fire. Notice that putting a 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.

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 you can use the NewImageResetOptions property to stop some or all of the values from resetting.

Example

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 Leadtools.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new Leadtools.Controls.ImageViewer(createOptions);

               // Set the interactive mode to PanZoom
               var interactiveMode = new Leadtools.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