progress Event

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>