zoom Method

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_ZoomExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Ratio to use when the user zooms in or out. Change this if another value is needed, 
      // for example, 2.0 will zoom the viewer in by 200% and out by 50% each time 
      const _zoomRatio = 1.2; 
 
      const updateZoomValueFromView = () => { 
         // Get the current scale factor from the viewer and set it in the zoom combo box 
         const percentage = viewer.scaleFactor * 100.0; 
         titleOption.innerHTML = percentage.toFixed(2) + "%"; 
         zoomSelect.selectedIndex = 0; 
      }; 
 
      const output = document.getElementById("output"); 
 
      // Add a combo box for the zoom values 
      const zoomSelect = document.createElement("select"); 
 
      const zoomValues = ["10%", "25%", "50%", "75%", "100%", "125%", "200%", "400%", "800%", 
         "1600%", "2400%", "3200%", "6400%", "Actual Size", "Fit Page", "Fit Width", "Fit Height"]; 
 
      // Add a title option to show the current zoom 
      const titleOption = document.createElement("option"); 
      titleOption.disabled = true; 
      titleOption.innerHTML = "N/A"; 
      zoomSelect.appendChild(titleOption); 
 
      // Add default zoom values 
      for (let i = 0; i < zoomValues.length; i++) { 
         const option = document.createElement("option"); 
         option.textContent = zoomValues[i]; 
         zoomSelect.appendChild(option); 
      } 
      zoomSelect.selectedIndex = 0; 
      output.appendChild(zoomSelect); 
 
      // For zoom in button, use current ScaleFactor multiplied by the ratio 
      const zoomInButton = document.createElement("button"); 
      zoomInButton.innerHTML = "+"; // + 
      zoomInButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor * _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomInButton); 
 
      // For zoom out button, use current ScaleFactor divided by the ratio 
      const zoomOutButton = document.createElement("button"); 
      zoomOutButton.innerHTML = "-"; // - 
      zoomOutButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor / _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomOutButton); 
 
      zoomSelect.addEventListener("change", () => { 
         // Get the value from the combo box 
         const value = zoomSelect.value.trim(); 
         let isPercentage; 
         let sizeMode; 
         switch (value) { 
            case "Actual Size": 
               sizeMode = lt.Controls.ControlSizeMode.actualSize; 
               isPercentage = false; 
               break; 
            case "Fit Page": 
               sizeMode = lt.Controls.ControlSizeMode.fitAlways; 
               isPercentage = false; 
               break; 
            case "Fit Width": 
               sizeMode = lt.Controls.ControlSizeMode.fitWidth; 
               isPercentage = false; 
               break; 
            case "Fit Height": 
               sizeMode = lt.Controls.ControlSizeMode.fitHeight; 
               isPercentage = false; 
               break; 
            default: 
               isPercentage = true; 
               break; 
         } 
 
         if (!isPercentage) { 
            viewer.zoom(sizeMode, 1, viewer.defaultZoomOrigin); 
         } 
         else if (value) { 
            // A percentage, use it 
            const percentage = value.substring(0, value.length - 1); 
            viewer.zoom(lt.Controls.ControlSizeMode.none, parseFloat(percentage) / 100.0, viewer.defaultZoomOrigin); 
         } 
 
      }); 
 
      // Also update the value from the viewer when the transform changed, this happens if the user selects a fit mode, 
      // such as fit width or fit page. The viewer will change the scale factor accordingly. 
      // This also takes care of Pan/Zoom interactive mode updating the scale fatcor. 
      viewer.transformChanged.add((sender, e) => { 
         updateZoomValueFromView(); 
      }); 
 
      // Get the value from the viewer into the combo box 
      updateZoomValueFromView(); 
   } 
} 

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 | Zoom</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.Zoom(); 
 
   }; 
</script> 
</html>