Gets the current image processing completion percentage.
Object.defineProperty(ImageProcessingProgressEventArgs.prototype, 'percentage',
get: function()
)
The current image processing completion percentage (0 to 100).
export class ImageProcessingExample {
public imageLoaded: boolean = false;
public imageProcessing: lt.ImageProcessing;
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
// Initialize the LEADTOOLS Image Processing class
this.imageProcessing = new lt.ImageProcessing();
this.imageProcessing.jsFilePath = "../LT/Leadtools.ImageProcessing.Main.js";
}
public run = (resetId: string, runId: string, progressId: string) => {
document.getElementById(resetId).onclick = this.loadImage;
document.getElementById(runId).onclick = this.runImageProcessing;
document.getElementById(progressId).onclick = this.updateProgress;
// hook to the completed and (optionally) progress event
this.imageProcessing.completed.add(this.imageProcessing_Completed);
this.updateProgress();
// Load the image
this.loadImage();
}
public updateUIState = (): void => {
(document.getElementById("resetButton") as HTMLButtonElement).disabled = !this.imageLoaded;
(document.getElementById("runButton") as HTMLButtonElement).disabled = !this.imageLoaded;
}
public loadImage = (): void => {
// Load the image
const imgElement = document.createElement("img");
this.imageLoaded = false;
let load = () => {
imgElement.removeEventListener("load", load, false);
// Draw the image on canvas
const myCanvas = document.getElementById("myCanvas") as HTMLCanvasElement;
myCanvas.width = imgElement.naturalWidth;
myCanvas.height = imgElement.naturalHeight;
const context: CanvasRenderingContext2D = myCanvas.getContext("2d");
context.drawImage(imgElement, 0, 0);
this.imageLoaded = true;
this.updateUIState();
};
imgElement.addEventListener("load", load, false);
imgElement.crossOrigin = "Anonymous";
imgElement.src = "./Images/ImageViewer.png"; // Or any raster image URL
this.updateUIState();
}
public runImageProcessing = (): void => {
// If we are running, abort
if (this.imageProcessing.isRunning) {
this.imageProcessing.abort();
(document.getElementById("runButton") as HTMLButtonElement).value = "Run";
return;
}
// Run the command
// Get the name of the command
const ipSelect = document.getElementById("ipSelect") as HTMLSelectElement;
const index: number = ipSelect.selectedIndex;
const command: string = ipSelect.options[index].text;
// Get the source canvas image data
const myCanvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const context: CanvasRenderingContext2D = myCanvas.getContext("2d");
const imgData: ImageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height);
// Set the command
this.imageProcessing.command = command;
// The source image data
this.imageProcessing.imageData = imgData;
// Set the arguments
let args: any[][] = this.imageProcessing.arguments;
// If this is the fill command, then set the color
if (command == "Fill") {
// Set the fill color, dark red in this case, the format is 0x AA RR GG BB
args["color"] = 0xFF7F0000;
} else {
// No, clear the arguments.
Object.getOwnPropertyNames(args).forEach((prop) => {
delete args[prop];
});
}
// Run the command
(document.getElementById("runButton") as HTMLButtonElement).value = "Abort";
this.imageProcessing.run();
}
public imageProcessing_Progress = (sender, e): void => {
// Update the progress label
const progressLabel = document.getElementById("progressLabel");
const percentage: number = parseInt(e.percentage);
progressLabel.textContent = percentage + "%";
}
public imageProcessing_Completed = (sender, e): void => {
// Get the result and update the canvas
const imgData: ImageData = e.imageData;
const myCanvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const context: CanvasRenderingContext2D = myCanvas.getContext("2d");
context.putImageData(imgData, 0, 0);
(document.getElementById("runButton") as HTMLButtonElement).value = "Run";
}
public updateProgress = (): void => {
if ((document.getElementById("progressCheckBox") as HTMLInputElement).checked) {
// Hook to the Progress and Completed events
if (lt.LTHelper.supportsWebWorker) {
this.imageProcessing.progress.add(this.imageProcessing_Progress);
}
else {
alert("Web workers are not supported by this browser. Callbacks will be disabled");
}
} else {
this.imageProcessing.progress.remove(this.imageProcessing_Progress);
}
}
}