In This Topic ▼

getImageUrl Method

Summary

Gets a URL to the raster image for this page.

Syntax

TypeScript

JavaScript

DocumentPage.prototype.getImageUrl = function()

getImageUrl(): string;

Return Value

A string representing the URL to the raster image for this page.

Remarks

For more information on this method, or to load the image through the Document Library, see GetThumbnailImageElement.

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 a page into a HTML Image element.

GetImageUrl.ts

DocumentHelper.ts

GetImageUrl.js

DocumentHelper.js

GetImageUrl.html

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentPage_GetImageUrlExample { 
   private imgEle: HTMLElement; 
 
   public constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
      DocumentHelper.initFactory(); 
   } 
 
   public run = (buttonID: string, imgID: string) => { 
      const exampleButton = document.getElementById(buttonID); 
      exampleButton.onclick = this.onClick; 
 
      this.imgEle = document.getElementById(imgID); 
      console.log(this.imgEle); 
  } 
 
   onClick = () => { 
      //Load the initial document 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      const img = (this.imgEle as HTMLImageElement); 
 
      DocumentHelper.log("Loading document..."); 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            DocumentHelper.log("Done."); 
 
            const pageNumber = 2; 
            const docPage = doc.pages.item(pageNumber - 1); 
            // Instead of loading through the Documents Library, use an img ourselves 
            const pageImageUrl = docPage.getImageUrl(); 
            img.onload = () => { 
               DocumentHelper.log("Loaded!"); 
            }; 
            img.onerror = () => { 
               DocumentHelper.log("Failed."); 
            }; 
            DocumentHelper.log("Loading: " + pageImageUrl); 
            img.src = pageImageUrl; 
         }) 
         .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_GetImageUrlExample { 
   imgEle; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
      DocumentHelper.initFactory(); 
   } 
 
   run = (buttonID, imgID) => { 
      const exampleButton = document.getElementById(buttonID); 
      exampleButton.onclick = this.onClick; 
 
      this.imgEle = document.getElementById(imgID); 
      console.log(this.imgEle); 
  } 
 
   onClick = () => { 
      //Load the initial document 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      const img = this.imgEle; 
 
      DocumentHelper.log("Loading document..."); 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            DocumentHelper.log("Done."); 
 
            const pageNumber = 2; 
            const docPage = doc.pages.item(pageNumber - 1); 
            // Instead of loading through the Documents Library, use an img ourselves 
            const pageImageUrl = docPage.getImageUrl(); 
            img.onload = () => { 
               DocumentHelper.log("Loaded!"); 
            }; 
            img.onerror = () => { 
               DocumentHelper.log("Failed."); 
            }; 
            DocumentHelper.log("Loading: " + pageImageUrl); 
            img.src = pageImageUrl; 
         }) 
         .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 | GetImageUrl</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.GetImageUrl(); 
      example.run("exampleButton", 'img'); 
   }; 
</script> 
</html>