ImageProcessing Object

Summary

Provides support for image processing on a HTML5 ImageData.

Syntax
TypeScript
JavaScript
function lt.ImageProcessing 
class lt.ImageProcessing() 

Remarks

The LEADTOOLS JavaScript ImageProcessing class allows you to perform various image processing commands on an HTML5 ImageData object.

ImageProcessing uses HTML5 a web worker to run the command in a separate thread. If the browser does not support web workers, then the work is emulated in the same thread. The RunInMainThread property can be used to force the command to not use a web worker and run the command in the current thread.

The nature of web workers dictate that the code behind is stored in a separate JavaScript file. This file does not have to be part of your page script; instead it is loaded dynamically when the command is run.

Follow these steps to run an image processing command:

  1. Create a new instance of ImageProcessing

  2. Set the JavaScript file name to use in the JSFilePath property. For a list of supported file names, refer to LEADTOOLS JavaScript Image Processing

  3. Set the desired command name in Command and any required arguments. Refer to the topic above for a list of supported command names and their arguments

  4. Set the source HTML5 canvas ImageData object in the ImageData property. The image data can be obtained from the drawing context of any canvas in your application or from LEADTOOLS Image Viewer.

  5. Subscribe to the Completed event. This is not optional since web workers do not allow changing the source data (in this case, the source image data). The event will contain the updated image data. If the command contains out parameters, you can query them from the event data as well

  6. Optionally, subscribe to the Progress event to obtain a progress report

  7. Call the Run method

  8. When the command finishes, the Completed event fires, set the image data back into the drawing context. If the command contains out parameters, you can query them from the event data as well

  9. Finally, at anytime after the Run is called, you can call Abort to abort the current operation. The original data will not be affected

During any of the above, if an error occurs, the Error event fires with Error containing the error object.

Example

This example shows how to perform image processing on a canvas.

TypeScript
JavaScript
<!DOCTYPE html> 
<html> 
 
<head> 
   <title>Image Processing Test</title> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <script src="Scripts/Leadtools.js"></script> 
   <script type="text/javascript"> 
      (function () { 
         var imageLoaded = false; 
         var imageProcessing; 
 
         function updateUIState() { 
            document.getElementById("resetButton").disabled = !imageLoaded; 
            document.getElementById("runButton").disabled = !imageLoaded; 
         } 
 
         function loadImage() { 
 
            // Load the image 
            var imgElement = document.createElement("img"); 
            var load = null; 
            imageLoaded = false; 
 
            load = function () { 
               imgElement.removeEventListener("load", load, false); 
 
               // Draw the image on canvas 
               var myCanvas = document.getElementById("myCanvas"); 
               myCanvas.width = imgElement.naturalWidth; 
               myCanvas.height = imgElement.naturalHeight; 
               var context = myCanvas.getContext("2d"); 
               context.drawImage(imgElement, 0, 0); 
 
               imageLoaded = true; 
               updateUIState(); 
            }; 
 
            imgElement.addEventListener("load", load, false); 
 
            imgElement.src = "Images/24.png"; // Or any raster image URL 
            updateUIState(); 
         } 
 
         function runImageProcessing() { 
 
            // If we are running, abort 
            if (imageProcessing.isRunning) { 
               imageProcessing.abort(); 
               document.getElementById("runButton").value = "Run"; 
               return; 
            } 
 
            // Run the command 
 
            // Get the name of the command 
            var ipSelect = document.getElementById("ipSelect"); 
            var index = ipSelect.selectedIndex; 
            var command = ipSelect.options[index].text; 
 
            // Get the source canvas image data 
            var myCanvas = document.getElementById("myCanvas"); 
            var context = myCanvas.getContext("2d"); 
            var imgData = context.getImageData(0, 0, myCanvas.width, myCanvas.height); 
 
            // Set the command 
            imageProcessing.command = command; 
 
            // The source image data 
            imageProcessing.imageData = imgData; 
 
            // Set the arguments 
            var arguments = 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 
               arguments["color"] = 0xFF7F0000; 
            } else { 
               // No, clear the arguments. 
               Object.clearKeys(arguments); 
            } 
 
            // Run the command 
            document.getElementById("runButton").value = "Abort"; 
 
            imageProcessing.run(); 
         } 
 
         function imageProcessing_Progress(sender, e) { 
            // Update the progress label 
            var progressLabel = document.getElementById("progressLabel"); 
            var percentage = e.percentage; 
            progressLabel.textContent = percentage + "%"; 
         } 
 
         function imageProcessing_Completed(sender, e) { 
            // Get the result and update the canvas 
            var imgData = e.imageData; 
            var myCanvas = document.getElementById("myCanvas"); 
            var context = myCanvas.getContext("2d"); 
            context.putImageData(imgData, 0, 0); 
 
            document.getElementById("runButton").value = "Run"; 
         } 
 
         function updateProgress() { 
            if (document.getElementById("progressCheckBox").checked) { 
               // Hook to the Progress and Completed events 
               if (lt.LTHelper.supportsWebWorker) { 
                  imageProcessing.progress.add(imageProcessing_Progress); 
               } 
               else { 
                  alert("Web workers are not supported by this browser. Callbacks will be disabled"); 
               } 
            } else { 
               imageProcessing.progress.remove(imageProcessing_Progress); 
            } 
         } 
 
         function runDemo() { 
            window.onload = function () { 
               // Add the button handlers 
               document.getElementById("resetButton").addEventListener("click", loadImage, false); 
               document.getElementById("runButton").addEventListener("click", runImageProcessing, false); 
               document.getElementById("progressCheckBox").addEventListener("click", updateProgress, false); 
 
               // Initialize the LEADTOOLS Image Processing class 
               imageProcessing = new lt.ImageProcessing(); 
               imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Main.js"; 
 
               // Hook to the Completed and (optionally) Progress event 
               imageProcessing.completed.add(imageProcessing_Completed); 
               updateProgress(); 
 
               // Load the image 
               loadImage(); 
            } 
         } 
 
         runDemo(); 
      })(); 
   </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> 
 
</html> 
// ImageProcessing.htm 
<!DOCTYPE html> 
<html> 
 
<head> 
   <title>Image Processing Test</title> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <script src="libs/Leadtools.js"></script> 
   <script src="ImageProcessing.js"></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> 
 
</html> 
// ImageProcessing.ts 
class App_ImageProcessing { 
   public imageLoaded: boolean = false; 
   public imageProcessing: lt.ImageProcessing; 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Initialize the LEADTOOLS Image Processing class 
      this.imageProcessing = new lt.ImageProcessing(); 
      this.imageProcessing.jsFilePath = "libs/Leadtools.ImageProcessing.Main.js"; 
   } 
 
   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; 
         imageProcessingApp.updateUIState(); 
      }; 
 
      imgElement.addEventListener("load", load, false); 
 
      imgElement.src = "Images/24.png"; // Or any raster image URL 
      imageProcessingApp.updateUIState(); 
   } 
 
   public runImageProcessing(): void { 
      // If we are running, abort 
      if (imageProcessingApp.imageProcessing.isRunning) { 
         imageProcessingApp.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 
      imageProcessingApp.imageProcessing.command = command; 
 
      // The source image data 
      imageProcessingApp.imageProcessing.imageData = imgData; 
 
      // Set the arguments 
      let args: any[][] = imageProcessingApp.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"; 
 
      imageProcessingApp.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) { 
            imageProcessingApp.imageProcessing.progress.add(imageProcessingApp.imageProcessing_Progress); 
         } 
         else { 
            alert("Web workers are not supported by this browser. Callbacks will be disabled"); 
         } 
      } else { 
         imageProcessingApp.imageProcessing.progress.remove(imageProcessingApp.imageProcessing_Progress); 
      } 
   } 
} 
 
let imageProcessingApp: App_ImageProcessing; 
window.onload = function () { 
   imageProcessingApp = new App_ImageProcessing(); 
 
   // Add the button handlers 
   document.getElementById("resetButton").addEventListener("click", imageProcessingApp.loadImage, false); 
   document.getElementById("runButton").addEventListener("click", imageProcessingApp.runImageProcessing, false); 
   document.getElementById("progressCheckBox").addEventListener("click", imageProcessingApp.updateProgress, false); 
 
   // hook to the completed and (optionally) progress event 
   imageProcessingApp.imageProcessing.completed.add(imageProcessingApp.imageProcessing_Completed); 
   imageProcessingApp.updateProgress(); 
 
   // Load the image 
   imageProcessingApp.loadImage(); 
} 

Requirements

Target Platforms

Help Version 20.0.2019.3.11
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2019 LEAD Technologies, Inc. All Rights Reserved.

Leadtools Assembly