In This Topic ▼

maximumImagePixelSize Property

Summary

The maximum width or height in pixels to use when obtaining image data from the pages in this document.

Syntax

TypeScript

JavaScript

Object.defineProperty(LoadDocumentOptions.prototype, 'maximumImagePixelSize', 
   get: function(), 
   set: function(value) 
)

maximumImagePixelSize: number;

Property Value

The maximum width or height in pixels to use when obtaining image data from the pages in this document. The default value is 0, which means to use the original size.

Remarks

The Document Viewers demos set this value as follows:

Operating System	Value
Desktop operating system	4096
Mobile operating system	2048

This value will be used as the default for the created document's DocumentImages.maximumImagePixelSize.

The GetImageElement, GetSvgElement, and GetSvgBackImageElement methods are used to obtain a raster or SVG document representation of a page in the document. When the value of MaximumImagePixelSize is 0 (the default), then the image or SVG object returned will have the same size as the page.

This may not be the desired behavior when the pixel size of the original document is large (for example, if the Document library is used by a mobile application where memory size is limited). Limiting the maximum size of the images returned can also improve the performance of any type of application. The size of the data transferred between the document and the application is smaller and therefore, it can be obtained sooner and rendered faster.

To limit the maximum size of the image and SVG objects, set the value of MaximumImagePixelSize to the desired pixel size. After that, any calls to GetImageElement, GetSvgUrl, or GetSvgBackImageElement will result in a raster or SVG image that is up to but not exceeding MaximumImagePixelSize in width or height. The framework performs this by resizing the data as it is being obtained while maintaining the aspect ratio.

Example: The page has a size of 8.5 by 11 inches (Size is 6120 by 7920). The pixel size at a typical resolution of 300 is 2550 by 3300.

Calling GetImageElement with the value of MaximumImagePixelSize set to the default of 0 will result in no re-sizing: the image object obtained will have a size of 2550 by 3300 pixels. The scale value used is 1.0.

If the value of MaximumImagePixelSize is set to 1024, then the image will be resized before it is returned, resulting in a size of 792 by 1024 pixels. This is calculated as the best of the original size into the maximum allowed while keeping the aspect ratio. The scale value used is 3.223.

However, if the value of MaximumImagePixelSize is set to 4096, then the image will not be resized since the original size fits inside the maximum value. The scale value used is 1.0.

In all cases, the scale value used will be set in ImageScale. The application can use this value to determine if the image was scaled and to perform calculations involving coordinate conversions between the resulting image pixels and page units. The LEADTOOLS Document Viewer sets this value in the image scale of each item for a page inside the image viewer control.

The same behavior described above will occur for GetSvgUrl (the resulting SVG document is resized) and GetSvgBackImageUrl. The page will typically have one ImageScale at all times.

Example

LoadFromUri.ts

DocumentHelper.ts

LoadFromUri.js

DocumentHelper.js

LoadFromUri.html

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentFactory_LoadFromUriExample { 
    private imgEle: HTMLElement; 
    public constructor() { 
       lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function ( 
          setLicenseResult 
       ) { 
          if (setLicenseResult.result) { 
             console.log("LEADTOOLS client license set successfully"); 
          } else { 
             var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n";  
             alert(msg);  
          } 
       }); 
        DocumentHelper.initFactory(); 
    } 
 
    public run = (buttonID: string, imgID: string) => { 
        document.getElementById(buttonID).onclick = this.loadFromUri; 
        this.imgEle = document.getElementById(imgID); 
    } 
 
    /** 
     * Load a new document from URI 
     */ 
    loadFromUri = () => { 
        const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
 
        lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions) 
            .done((document: lt.Document.LEADDocument) => { 
                DocumentHelper.log("Document loaded with " + document.pages.count + " pages", document); 
 
                // Show the PDF image of the first page 
                const page = document.pages.item(0); 
                (this.imgEle as HTMLImageElement).src = page.getSvgUrl(lt.Document.DocumentGetSvgOptions.none); 
            }) 
            .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 DocumentFactory_LoadFromUriExample { 
    imgEle; 
    constructor() { 
       lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function ( 
          setLicenseResult 
       ) { 
          if (setLicenseResult.result) { 
             console.log("LEADTOOLS client license set successfully"); 
          } else { 
             var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
             alert(msg); 
          } 
       }); 
        DocumentHelper.initFactory(); 
    } 
 
    run = (buttonID, imgID) => { 
        document.getElementById(buttonID).onclick = this.loadFromUri; 
        this.imgEle = document.getElementById(imgID); 
    } 
 
    /** 
     * Load a new document from URI 
     */ 
    loadFromUri = () => { 
        const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
 
        lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions) 
            .done((document) => { 
                DocumentHelper.log("Document loaded with " + document.pages.count + " pages", document); 
 
                // Show the PDF image of the first page 
                const page = document.pages.item(0); 
                this.imgEle.src = page.getSvgUrl(lt.Document.DocumentGetSvgOptions.none); 
            }) 
            .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 | LoadFromUri</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.DocumentFactory.LoadFromUri(); 
      example.run("exampleButton"); 
   }; 
</script> 
</html>