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);
}
}
}
export class ImageProcessingExample {
imageLoaded = false;
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";
}
run = (resetId, runId, progressId) => {
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();
}
updateUIState = () => {
document.getElementById("resetButton").disabled = !this.imageLoaded;
document.getElementById("runButton").disabled = !this.imageLoaded;
}
loadImage = () => {
// 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");
myCanvas.width = imgElement.naturalWidth;
myCanvas.height = imgElement.naturalHeight;
const context = 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();
}
runImageProcessing = () => {
// If we are running, abort
if (this.imageProcessing.isRunning) {
this.imageProcessing.abort();
document.getElementById("runButton").value = "Run";
return;
}
// Run the command
// Get the name of the command
const ipSelect = document.getElementById("ipSelect");
const index = ipSelect.selectedIndex;
const command = ipSelect.options[index].text;
// Get the source canvas image data
const myCanvas = document.getElementById("myCanvas");
const context = myCanvas.getContext("2d");
const imgData = 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 = 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").value = "Abort";
this.imageProcessing.run();
}
imageProcessing_Progress = (sender, e) => {
// Update the progress label
const progressLabel = document.getElementById("progressLabel");
const percentage = parseInt(e.percentage);
progressLabel.textContent = percentage + "%";
}
imageProcessing_Completed = (sender, e) => {
// Get the result and update the canvas
const imgData = e.imageData;
const myCanvas = document.getElementById("myCanvas");
const context = myCanvas.getContext("2d");
context.putImageData(imgData, 0, 0);
document.getElementById("runButton").value = "Run";
}
updateProgress = () => {
if (document.getElementById("progressCheckBox").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);
}
}
}
<!doctype html>
<html lang="en">
<title>Document Example | Create</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>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type="button" id="resetButton" value="Reset" />
<label for="ipSelect">Image Processing:</label>
<select id="ipSelect">
<option>Flip</option>
<option>Reverse</option>
<option>Fill</option>
</select>
<label for="progressCheckBox">Use progress</label>
<input type="checkbox" id="progressCheckBox" checked="checked" />
<input type="button" id="runButton" value="Run" />
<label id="progressLabel">0%</label>
</div>
<div>
<canvas id="myCanvas" />
</div>
</body>
<script>
window.onload = () => new window.examples.ImageProcessing().run('resetButton', 'runButton', 'progressLabel');
</script>
</html>