run Method

Summary

Run the current image processing.

Syntax
TypeScript
JavaScript
ImageProcessing.prototype.run = function() 
run(): void; 
Remarks

Calling this method will perform the image processing command defined by Command on the image data set in ImageData. The Progress and Completed events will fire accordingly.

Example
ImageProcessing.ts
ImageProcessing.js
ImageProcessing.html
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> 
Requirements

Target Platforms

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

Leadtools Assembly
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.