interpolation Event

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_InterpolationModeExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // NOTE: in order for this example to work, you must include the image processing scripts in a directory: 
      lt.Controls.ImageViewer.imageProcessingLibrariesPath = "../LT"; 
 
      const _interpolationModeNames = ["None", "Resample", "ScaleToGray"]; 
      const _interpolationModeStatus = ["Started", "Completed", "Aborted", "Error"]; 
 
      const urls = [ 
         "http://demo.leadtools.com/images/png/ocr1.png", 
         "http://demo.leadtools.com/images/png/ocr2.png", 
         "http://demo.leadtools.com/images/png/ocr3.png", 
         "http://demo.leadtools.com/images/png/ocr4.png" 
      ]; 
 
 
      // Optional: tell the imageViewer to interpolate in parallel 
      viewer.interpolationRunMode = lt.Controls.InterpolationRunMode.parallel; 
 
      // Begin updating the imageviewer (stops rendering until endUpdate is called) 
      viewer.beginUpdate(); 
 
      viewer.items.clear(); 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      viewer.itemBorderThickness = 5; 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(5); 
 
      for (let urlIndex = 0; urlIndex < urls.length; urlIndex++) { 
         const item = new lt.Controls.ImageViewerItem(); 
         item.text = "Item" + urlIndex; 
         item.url = urls[urlIndex]; 
         viewer.items.add(item); 
      } 
      viewer.endUpdate(); 
 
      viewer.interpolation.add((sender, e) => { 
         let lines = []; 
         const itemIndex = viewer.items.indexOf(e.item); 
         lines.push("Item " + itemIndex + " " + _interpolationModeNames[e.mode] + ": " + _interpolationModeStatus[e.status]); 
         if (e.status === lt.Controls.InterpolationStatus.error) { 
            lines.push("  Error name:" + e.error.name + " message:" + e.error.message); 
         } 
         addLines(lines); 
      }); 
 
      const output = document.getElementById("output"); 
 
      // Add a select to show the interpolation options 
      const select = document.createElement("select"); 
      output.appendChild(select); 
 
      const interpolationModes = [lt.Controls.InterpolationMode.none, lt.Controls.InterpolationMode.resample, lt.Controls.InterpolationMode.scaleToGray]; 
      for (let index = 0; index < interpolationModes.length; index++) { 
         const value = interpolationModes[index]; 
         const option = document.createElement("option"); 
         option.innerHTML = _interpolationModeNames[value]; 
         select.appendChild(option); 
      } 
 
      select.addEventListener("change", () => { 
         const index = select.selectedIndex; 
         switch (index) { 
            case 0: 
               viewer.interpolationMode = lt.Controls.InterpolationMode.none; 
               break; 
            case 1: 
               viewer.interpolationMode = lt.Controls.InterpolationMode.resample; 
               break; 
            case 2: 
               viewer.interpolationMode = lt.Controls.InterpolationMode.scaleToGray; 
               break; 
         } 
      }); 
      // Start with resample 
      select.selectedIndex = lt.Controls.InterpolationMode.resample; 
      viewer.interpolationMode = lt.Controls.InterpolationMode.resample; 
 
      const textOutput = document.createElement("div"); 
      output.appendChild(textOutput); 
      const addLines = (messages) => { 
         const lines = messages.map((line) => { return "<p>" + line + "</p>" }); 
         textOutput.innerHTML += lines; 
      } 
   } 
} 

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>Controls Example | InterpolationMode</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> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.InterpolationMode(); 
 
   }; 
</script> 
</html>