Abort the current image processing.
ImageProcessing.prototype.abort = function()
Use IsRunning to check if the image processing is currently running. You can safely call Abort when the image processing is not running, the call will be ignored and no error will occur.
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);
}
}
}