getImageElement Method


Gets an HTML Element representing the raster image for this page.


JavaScript Syntax
DocumentPage.prototype.getImageElement = function(imageLoader) 
TypeScript Syntax
getImageElement(imageLoader: ImageLoader): JQueryPromise<any>; 



An optional ImageLoader instance to use instead of the internally-created one.

Return Value

A Promise object that may resolve successfully to an HTML Element, or fail if the raster image cannot be returned because it does not exist for this DocumentPage.


To get only a URL for the raster image for this page, see GetImageUrl.

All document types support this method.

If this document type supports loading raster images at any resolution (the value of IsResolutionsSupported is true), then this method will return the image using the current page Resolution value.

If the value of ImageScale is a value greater than 1, then the result raster image will have a size that is equal to Size / ImageScale.

The LEADTOOLS Document Viewer uses this method to obtain the raster image for the page when the view mode is "Raster Image". The LEADTOOLS Document Converter uses this method to obtain the raster image for the page when converting using OCR or when adding the overlay image of a page if needed.

This method takes an optional imageLoader parameter for additional image load configuration. If an ImageLoader is provided, Run will not be called and it is the responsibility of the application to call it when needed. If an ImageLoader is not supplied, one is created internally and Run is called before this method exits. See Documents Image Loading for more information.

This request can pass arbitrary user data through ServiceUserData.

Refer to Image Loading Using LEADTOOLS Documents Library and Document Loading Using LEADTOOLS Documents Library for more information.


This example shows will load a PDF document and then load pages using different load methods (default and Ajax).

Start with the example in Document and replace the example function call to the function below.

JavaScript Example
function getImageElementExample() { 
   // Load a new document 
   var url = ""; 
   console.log("Loading document ..."); 
   lt.Documents.DocumentFactory.loadFromUri(url, null) 
       .done(function (doc) { 
          // Add a prepareAjax event callback 
          lt.Documents.DocumentFactory.prepareAjax.add(function (sender, e) { 
          // For successful loading 
          var doneLoad = function (img) { 
             console.log("Image Loaded: " + img.src); 
          // For failed loading 
          var failLoad = function (jqXHR, statusText, errorThrown) { 
             showServiceError(jqXHR, statusText, errorThrown); 
          // Below is the default loading method 
          //lt.Documents.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
          var page1 = doc.pages.item(0); 
          // Use AJAX, so prepareAjax callback above is called 
          lt.Documents.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
          var page2 = doc.pages.item(1); 
          // Reset to the default loading method and use AJAX from a custom ImageLoader instead 
          lt.Documents.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
          var imageLoader = new lt.ImageLoader(); 
          imageLoader.urlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
          imageLoader.done.add(function () { 
             console.log("This is a custom 'done' handler that runs *before* the promise is resolved"); 
          var page3 = doc.pages.item(3); 
          // Pass the imageLoader as a parameter to use it 
          // Must call ourselves if we passed it! 
       .fail(function (jqXHR, statusText, errorThrown) { 
          showServiceError(jqXHR, statusText, errorThrown); 


Target Platforms

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

Leadtools.Documents Assembly