redirectCanvas Property

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 SpyGlassInteractiveMode_RedirectCanvasExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      const output = document.getElementById("output"); 
 
      // The width and height of our redirect canvas 
      const canvasWidth = 250; 
      const canvasHeight = 250; 
 
      // Create the redirect canvas 
      const redirectCanvas = document.createElement("canvas"); 
      redirectCanvas.style.border = "1px solid black"; 
      redirectCanvas.width = canvasWidth; 
      redirectCanvas.height = canvasHeight; 
 
      // Create the SpyGlass mode 
      const mode = new lt.Controls.ImageViewerSpyGlassInteractiveMode(); 
      mode.workCompleted.add((sender, e) => { 
         if (mode.redirectCanvas) { 
            // Clear after drawing on redirected canvas 
            const ctx = mode.redirectCanvas.getContext("2d"); 
            ctx.clearRect(0, 0, mode.redirectCanvas.width, mode.redirectCanvas.height) 
         } 
      }); 
      mode.size = lt.LeadSizeD.create(canvasWidth, canvasHeight); 
      mode.redirectCanvas = redirectCanvas; 
      mode.backgroundColor = "yellow"; 
      mode.crosshairColor = "red"; 
 
      mode.drawImage.add((sender, e) => { 
         const rect = e.destinationRectangle; 
         const ctx = e.context; 
 
         ctx.save(); 
 
         // Undo offset of the spyglass 
         ctx.translate(-rect.x, -rect.y); 
 
         // We could do anything here. For example, ImageViewerMagnifyGlassInteractiveMode zooms in. 
         // We will draw additional text over the image. 
 
         // Clip to the ImageViewer (optional) 
         const bounds = viewer.getViewBounds(false, true); 
         ctx.beginPath(); 
         ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height); 
         ctx.closePath(); 
         ctx.clip(); 
 
         // Draw the view 
         viewer.renderRedirect(ctx, new lt.Controls.ImageViewerRenderRedirectOptions(), lt.LeadRectD.empty); 
 
         // Draw some text on top 
         ctx.fillStyle = "white"; 
         ctx.strokeStyle = "white"; 
         ctx.font = "75px Times New Roman"; 
         ctx.fillText("Spyglass", bounds.x + (bounds.width / 2) - 100, bounds.y + (bounds.height / 2)); 
 
         ctx.restore(); 
      }); 
 
      // Add a toggle button 
      const button = document.createElement("button"); 
      button.onclick = () => { 
         if (mode.redirectCanvas) 
            mode.redirectCanvas = null; 
         else 
            mode.redirectCanvas = redirectCanvas; 
         updateButtonText(); 
      } 
      output.appendChild(button); 
 
      const updateButtonText = () => { 
         button.innerHTML = !mode.redirectCanvas ? "Redirect Render" : "Render on Viewer"; 
      } 
      updateButtonText(); 
 
      // Add the mode to the viewer 
      viewer.interactiveModes.clear(); 
      viewer.interactiveModes.add(mode); 
 
      // Add a select element for the shapes 
      const shapeSelect = document.createElement("select"); 
      output.appendChild(shapeSelect); 
 
      let keys = Object.keys(lt.Controls.ImageViewerSpyGlassShape); 
      keys.forEach((key) => { 
         if (!isNaN(Number(lt.Controls.ImageViewerSpyGlassShape[key])) && key !== "__enum") { 
            const option = document.createElement("option"); 
            option.innerHTML = key; 
            shapeSelect.appendChild(option); 
         } 
      }); 
 
      shapeSelect.selectedIndex = lt.Controls.ImageViewerSpyGlassShape.ellipse; 
      mode.shape = lt.Controls.ImageViewerSpyGlassShape.ellipse; 
      shapeSelect.addEventListener("change", () => { 
         mode.shape = shapeSelect.selectedIndex; 
      }); 
 
      // Add the canvas 
      const container = document.createElement("div"); 
      container.appendChild(redirectCanvas); 
      output.appendChild(container); 
   } 
} 

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