canvas Property

export class MedicalViewer_2D_Color_Example { 
    constructor(callback) { 
        // LEADTOOLS ImageViewer to be used with this example 
        this.medicalViewer = null; 
        // Generic state value used by the examples 
        this.timesClicked = 0; 
        // 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.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 1, 1); 
        this.medicalViewer.onSizeChanged(); 
        var cell = new lt.Controls.Medical.Cell(this.medicalViewer, this.medicalViewer.get_divId(), 1, 1); 
        // Set the show border to "true", to show a border around the cell.  
        cell.set_showFrameBorder(true); 
        // Add the cell to the viewer.   
        this.medicalViewer.layout.get_items().add(cell); 
        // [optional] Select the cell (it can also be selected by clicking on it.)  
        cell.set_selected(true); 
        // Now create a frame object which will hold the image inside the cell.  
        var cellFrame = new lt.Controls.Medical.Frame(cell); 
        // Add the frame to the cell class.  
        cell.get_frames().add(cellFrame); 
        // we are now going to to download an image from leadtools medical viewer demo web site, you need to change this to download images from your database.  
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function (data) { 
            if (this.readyState == 4 && this.status == 200) { 
                // here we got the authentication Code that we need to retrieve the images from leadtools database.  
                var authenticationCode = encodeURIComponent(this.responseText); 
                // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
                var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
                // The image dpi.  
                mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
                // the tile size, recommended value is 256  
                mrtiInfo.tileSize = lt.LeadSizeD.create(1944, 1944); 
                mrtiInfo.frameIndex = 0; 
                // does this image support window level.  
                mrtiInfo.supportWindowLevel = true; 
                // different resolution for the image.  
                var resolutions = [{ "width": 1944, "height": 1944 }, { "width": 972, "height": 972 }, { "width": 486, "height": 486 }, { "width": 243, "height": 243 }, { "width": 121, "height": 121 }]; 
                mrtiInfo.resolutions = []; 
                for (var i = 0; i < resolutions.length; i++) { 
                    mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
                } 
                // the image width and height.  
                cellFrame.set_width(mrtiInfo.resolutions[0].width); 
                cellFrame.set_height(mrtiInfo.resolutions[0].height); 
                // the image full size.  
                mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
                // now we need the image URL,  
                var imageUri = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/retrieve"; 
                imageUri += "/GetImageTile?auth="; 
                imageUri += authenticationCode; 
                // this the image instance UID, change this if you want to retrieve anything else.  
                imageUri += "&instance=1.2.840.114434.12387576.10100457.4075310.6503931"; 
                mrtiInfo.imageUri = imageUri; 
                mrtiInfo.supportWindowLevel = false; 
                // set this info to the cell frame.  
                cellFrame.mrtiInfo = mrtiInfo; 
                // now we need to set the information for the image so we can do window level.  
                var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
                // set the image width and height.  
                imageInfo.width = 1944; 
                imageInfo.height = 1944; 
                // bits per pixel for the image  
                imageInfo.bitsPerPixel = 24; 
                // set these information to the frame.  
                cellFrame.set_information(imageInfo); 
            } 
        }; 
        // We are trying here to get an image from the Leadtools database, we need to login and get the authentication code.  
        xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/auth/AuthenticateUser", true); 
        xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
        // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
        xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
        // 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.medicalViewer); 
        }); 
    } 
} 

import { MedicalViewer_2D_Color_Example } from "../MedicalViewer_2D_Color_Example"; 
 
 
export class SpyGlass_Example { 
   private viewerExample; 
   private medicalViewer; 
   constructor() { 
      this.viewerExample = new MedicalViewer_2D_Color_Example(this.run); 
   } 
 
   private run = (medicalViewer: lt.Controls.Medical.MedicalViewer) => { 
      this.medicalViewer = medicalViewer; 
 
      var cell: lt.Controls.Medical.Cell = this.medicalViewer.layout.cells.get_item(0); 
 
      var spyGlass: lt.Controls.Medical.SpyGlassAction = new lt.Controls.Medical.SpyGlassAction(0); 
 
 
      spyGlass.resizeGlassOnScroll = true; 
 
      cell.setCommand(0, spyGlass); 
      cell.runCommand(0); 
 
      spyGlass.imageRequested.add((sender: any, e: lt.Controls.Medical.SpyGlassEventArgs) => { 
 
         e.outputCanvas = e.inputCanvas; 
 
      }); 
 
 
 
   } 
} 

export class MedicalViewer_2D_Color_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected medicalViewer: lt.Controls.Medical.MedicalViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (medicalViewer: lt.Controls.Medical.MedicalViewer) => 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: HTMLDivElement = <HTMLDivElement>document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
 
 
 
      this.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 1, 1); 
      this.medicalViewer.onSizeChanged(); 
 
      var cell = new lt.Controls.Medical.Cell(this.medicalViewer, this.medicalViewer.get_divId(), 1, 1); 
 
      // Set the show border to "true", to show a border around the cell.  
      cell.set_showFrameBorder(true); 
 
      // Add the cell to the viewer.   
      this.medicalViewer.layout.get_items().add(cell); 
 
      // [optional] Select the cell (it can also be selected by clicking on it.)  
      cell.set_selected(true); 
 
      // Now create a frame object which will hold the image inside the cell.  
      var cellFrame = new lt.Controls.Medical.Frame(cell); 
 
      // Add the frame to the cell class.  
      cell.get_frames().add(cellFrame); 
 
      // we are now going to download an image from LEADTOOLS Medical Viewer demo web site, you need to change this to download images from your database.  
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function (data) { 
         if (this.readyState == 4 && this.status == 200) { 
            // here we got the authentication Code that we need to retrieve the images from the LEADTOOLS database.  
            var authenticationCode = encodeURIComponent(this.responseText); 
 
 
            // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
            var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
 
            // The image dpi.  
            mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
 
            // the tile size, recommended value is 256  
            mrtiInfo.tileSize = lt.LeadSizeD.create(1944, 1944); 
            mrtiInfo.frameIndex = 0; 
 
            // does this image support window level?  
            mrtiInfo.supportWindowLevel = true; 
 
            // different resolution for the image.  
            var resolutions = [{ "width": 1944, "height": 1944 }, { "width": 972, "height": 972 }, { "width": 486, "height": 486 }, { "width": 243, "height": 243 }, { "width": 121, "height": 121 }]; 
 
            mrtiInfo.resolutions = []; 
            for (var i = 0; i < resolutions.length; i++) { 
               mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
            } 
 
            // the image width and height.  
            cellFrame.set_width(mrtiInfo.resolutions[0].width); 
            cellFrame.set_height(mrtiInfo.resolutions[0].height); 
 
            // the image full size.  
            mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
 
            // now we need the image URL,  
            var imageUri = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/retrieve"; 
            imageUri += "/GetImageTile?auth="; 
            imageUri += authenticationCode; 
            // this is the image instance UID, change this if you want to retrieve anything else.  
            imageUri += "&instance=1.2.840.114434.12387576.10100457.4075310.6503931"; 
            mrtiInfo.imageUri = imageUri; 
            mrtiInfo.supportWindowLevel = false; 
 
            // set this info to the cell frame.  
            cellFrame.mrtiInfo = mrtiInfo; 
 
 
            // now we need to set the information for the image so we can do window level.  
            var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
 
            // set the image width and height.  
            imageInfo.width = 1944; 
            imageInfo.height = 1944; 
 
            // bits per pixel for the image  
            imageInfo.bitsPerPixel = 24; 
 
            // set these information to the frame.  
 
            cellFrame.set_information(imageInfo); 
         } 
      }; 
 
      // We are trying to get an image from the LEADTOOLS database. We need to login and get the authentication code.  
      xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/auth/AuthenticateUser", true); 
      xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
      // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
      xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
 
      // 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.medicalViewer); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
   <title>SpyGlass Example</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> 
   <script src="../../LT/Leadtools.Controls.Medical.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  oncontextmenu="return false;"> 
   <p>Hold down the mouse button to show the spyglass control, zoom in/out by scrolling while holding down the mouse button.</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.MedicalViewer.SpyGlass(); 
 
   }; 
</script> 
</html>