getImageElement Method (original) (raw)
Summary
Gets an HTML Element representing the raster image for this page.
Syntax
DocumentPage.prototype.getImageElement = function(
_imageLoader_
)
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.
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>