Gets a value that indicate whether the image processing command is currently running.
Object.defineProperty(ImageProcessing.prototype, 'isRunning',
get: function()
)
true if the image processing command is currently running, otherwise; false.
After Run is called, the value of IsRunning will be set to true. After the Completed event fires, the value of IsRunning will be false. During that duration, you can call the Abort method to abort the operation.
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);
}
}
}