getImageElement Method

Summary

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

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

Parameters

imageLoader

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.

Remarks

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 Document Library and Document Loading Using LEADTOOLS Document Library for more information.

Example

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

Start with the example from LEADDocument and replace all the code inside the example function (search for the "// TODO: add example code here" comment) with the following code:

TypeScript
JavaScript
var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
log("Loading document ..."); 
lt.Document.DocumentFactory.loadFromUri(url, null) 
   .done(function (doc) { 
      log("Done."); 
      // Add a prepareAjax event callback 
      lt.Document.DocumentFactory.prepareAjax.add(function (sender, e) { 
         log("Prepare Ajax callback: " + e.settings.url + " (page " + e.settings.data.pageNumber + ")", e); 
      }); 
      // For successful loading 
      var doneLoad = function (img) { 
         log("Image Loaded: " + img.src); 
         document.body.appendChild(img); 
      }; 
 
      // Below is the default loading method 
      //lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
      var page1 = doc.pages.item(0); 
      page1.getImageElement() 
         .done(doneLoad) 
         .fail(showServiceError); 
 
      // Use AJAX, so prepareAjax callback above is called 
      lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
      var page2 = doc.pages.item(1); 
      page2.getImageElement() 
         .done(doneLoad) 
         .fail(showServiceError); 
 
      // Reset to the default loading method and use AJAX from a custom ImageLoader instead 
      lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
      var imageLoader = new lt.ImageLoader(); 
      imageLoader.urlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
      imageLoader.done.add(function () { 
         log("This is a custom 'done' handler that runs *before* the promise is resolved"); 
      }); 
      var page3 = doc.pages.item(2); 
      // Pass the imageLoader as a parameter to use it 
      page3.getImageElement(imageLoader) 
         .done(doneLoad) 
         .fail(showServiceError); 
      // Must call imageLoader.run ourselves if we passed it! 
      imageLoader.run(); 
   }) 
   .fail(showServiceError); 
class DocumentPage_GetImageElementExample { 
    public constructor() { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
    } 
 
    public run(buttonID: string) { 
        const exampleButton = document.getElementById(buttonID); 
        exampleButton.onclick = this.onClick; 
    } 
 
    onClick = () => { 
        //Load the initial document 
        const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        log("Loading document..."); 
        lt.Document.DocumentFactory.loadFromUri(url, null) 
            .done((doc) => { 
                log("Done."); 
                // Add a prepareAjax event callback 
                lt.Document.DocumentFactory.prepareAjax.add((sender, e) => { 
                    log("Prepare Ajax callback: " + e.settings.url + " (page " + e.settings.data.pageNumber + ")", e); 
                }); 
                // For successful loading 
                const doneLoad = (img) => { 
                    log("Image Loaded: " + img.src); 
                    document.body.appendChild(img); 
                }; 
 
                // Below is the default loading method 
                //lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
                const page1 = doc.pages.item(0); 
                page1.getImageElement() 
                    .done(doneLoad) 
                    .fail(showServiceError); 
 
                // Use AJAX, so prepareAjax callback above is called 
                lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
                const page2 = doc.pages.item(1); 
                page2.getImageElement() 
                    .done(doneLoad) 
                    .fail(showServiceError); 
 
                // Reset to the default loading method and use AJAX from a custom ImageLoader instead 
                lt.Document.DocumentImages.elementUrlMode = lt.ImageLoaderUrlMode.imageUrl; 
                const imageLoader = new lt.ImageLoader(); 
                imageLoader.urlMode = lt.ImageLoaderUrlMode.ajaxDataUrl; 
                imageLoader.done.add(() => { 
                    log("This is a custom 'done' handler that runs *before* the promise is resolved"); 
                }); 
                const page3 = doc.pages.item(2); 
                // Pass the imageLoader as a parameter to use it 
                page3.getImageElement(imageLoader) 
                    .done(doneLoad) 
                    .fail(showServiceError); 
                // Must call imageLoader.run ourselves if we passed it! 
                imageLoader.run(); 
            }) 
            .fail(showServiceError); 
            } 
} 

Requirements

Target Platforms

Help Version 20.0.2019.4.11
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2019 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Document Assembly