In This Topic ▼

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 can 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 will load a PDF document and then load pages using different load methods (default and Ajax).

GetImageElement.ts

DocumentHelper.ts

GetImageElement.js

DocumentHelper.js

GetImageElement.html

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentPage_GetImageElementExample { 
   public constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
      DocumentHelper.initFactory(); 
   } 
 
   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"; 
      DocumentHelper.log("Loading document..."); 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            DocumentHelper.log("Done."); 
            // Add a prepareAjax event callback 
            lt.Document.DocumentFactory.prepareAjax.add((sender, e) => { 
               DocumentHelper.log("Prepare Ajax callback: " + e.settings.url + " (page " + e.settings.data.pageNumber + ")", e); 
            }); 
            // For successful loading 
            const doneLoad = (img) => { 
               DocumentHelper.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(DocumentHelper.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(DocumentHelper.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(() => DocumentHelper.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(DocumentHelper.showServiceError); 
 
            // Must call imageLoader.run ourselves if we passed it! 
            imageLoader.run(); 
         }) 
         .fail(DocumentHelper.showServiceError); 
   } 
}

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message: string, data?: any) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
}

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentPage_GetImageElementExample { 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
      DocumentHelper.initFactory(); 
   } 
 
   run = (buttonID) => { 
      const exampleButton = document.getElementById(buttonID); 
      exampleButton.onclick = this.onClick; 
   } 
 
   onClick = () => { 
      //Load the initial document 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      DocumentHelper.log("Loading document..."); 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            DocumentHelper.log("Done."); 
            // Add a prepareAjax event callback 
            lt.Document.DocumentFactory.prepareAjax.add((sender, e) => { 
               DocumentHelper.log("Prepare Ajax callback: " + e.settings.url + " (page " + e.settings.data.pageNumber + ")", e); 
            }); 
            // For successful loading 
            const doneLoad = (img) => { 
               DocumentHelper.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(DocumentHelper.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(DocumentHelper.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(() => DocumentHelper.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(DocumentHelper.showServiceError); 
 
            // Must call imageLoader.run ourselves if we passed it! 
            imageLoader.run(); 
         }) 
         .fail(DocumentHelper.showServiceError); 
   } 
}

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message, data) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Document Example | GetImageElement</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <link rel="stylesheet" type="text/css" href="../../css/examples.css"> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="output"></div> 
   <div> 
      <img id="img" /> 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.DocumentPage.GetImageElement(); 
      example.run("exampleButton"); 
   }; 
</script> 
</html>