Gets a URL to the raster image for this page.
DocumentPage.prototype.getImageUrl = function()
getImageUrl(): string;
A string representing the URL to the raster image for this page.
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.
This example will load a PDF document and then load a page into a HTML Image element.
import { DocumentHelper } from "../../utilities/DocumentHelper";
export class DocumentPage_GetImageUrlExample {
private imgEle: HTMLElement;
public constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/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/v200/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>
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document