In This Topic ▼

Load and Display a DICOM Image in the Medical Viewer - HTML5 JavaScript

This tutorial shows how to load and display a DICOM image in the LEADTOOLS Medical Web Viewer. This tutorial also shows how to add annotation functionality.

Overview
Summary	This tutorial covers how to load and display a DICOM image in a JS application.
Completion Time	30 minutes
Visual Studio Project	Download tutorial project (3 KB)
Platform	JS Web Application
IDE	Visual Studio Code - Client
Development License	Download LEADTOOLS
Try it in another language	C#: .NET 6+ (WinForms) HTML5: HTML5 JavaScript

Required Knowledge

This application requires that the LEADTOOLS Medical Web Viewer and LEADTOOLS Medical Web WCF Service is configured. To get the service running and the viewer configured complete the below tutorials before working on the Load and Display a DICOM Image in the Medical Viewer - HTML5 JavaScript tutorial.

Create the Project and Add the LEADTOOLS References

Create a project folder that contains the following:

index.html file
app.js file
lib folder
LEADTOOLS folder

The references needed depend upon the purpose of the project. This tutorial requires the following JS files:

They can be found here: <INSTALL_DIR>\LEADTOOLS23\Bin\JS

Leadtools.js
Leadtools.Annotations.Engine.js
Leadtools.Annotations.Designers.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Annotations.Automation.js
Leadtools.Controls.js
Leadtools.Controls.Medical.js

Make sure to copy the JS files to the lib folder and to import them in the index.html file.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS references and setting a license are covered in more detail in the Add References and Set a License - HTML5 JavaScript tutorial.

Write the HTML File

The HTML contains the minimum code required to use the LEADTOOLS JavaScript Image Viewer in your application.

Leadtools.js is the kernel of the LEADTOOLS JavaScript support and is required by all other libraries.
Leadtools.Controls.js contains the basic image viewer functionality.
Leadtools.Annotations.Engine.js, Leadtools.Annotations.Automation.js, Leadtools.Annotations.Designers.js, and Leadtools.Annotations.Rendering.JavaScript.js contain the annotations functionalities that will be handled by the medical viewer.
Leadtools.Controls.Medical.js contains the medical image viewer that holds the medical images, and contains various medical functionalities, like window level, reference line, MPR, etc. All of these JS files are added to the head section of the HTML.

Open your project's index.html file. Add the below code to import the LEADTOOLS dependencies, LEADTOOLS logic, and set the container for the Medical Viewer:

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="utf-8" /> 
    <title>LEADTOOLS Demo</title> 
    <!-- LEADTOOLS Libraries --> 
    <script type="text/javascript" src="lib/Leadtools.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Controls.js"></script> 
 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Engine.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Controls.Medical.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Demos.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Demos.Annotations.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
  </head> 
  <body> 
    <!-- DIV to use as the container for the LEADTOOLS image viewer--> 
    <div 
      id="MedicalViewerParentDiv" 
      style="width: 600px; height: 600px; background-color:darkgray" 
    ></div> 
  </body> 
</html>

Write the JS File

Note

For this tutorial the LEADTOOLS Medical Web Service is running on http://localhost/MedicalViewerServiceAsp23/ . Change this path name to use the path that the LEADTOOLS Medical Web WCF Service is using locally.

Open your app.js file. Input the code below to create the MedicalViewer, initialize annotations, and load a DICOM image.

window.onload = function () { 
  const licenseUrl = "./Leadtools/LEADTOOLS.lic.txt";  
  const developerKey = "ADD THE CONTENTS OF THE LEADTOOLS.lic.key.txt FILE";  
  lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (  
    setLicenseResult  
  ) {  
    // Check the status of the license  
    if (setLicenseResult.result) {  
      console.log("LEADTOOLS client license set successfully");  
    } else {  
      const msg = "LEADTOOLS License is missing, invalid or expired\nError:\n";  
      console.log(msg);  
      alert(msg);  
    }  
  });  
 
  // Get the parent DIV 
  const imageViewerDiv = document.getElementById("MedicalViewerParentDiv"); 
 
  // Create the medical viewer control, and specify the number or rows and columns. 
  const viewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
 
  // [optional] Update the splitter size so it become thick and easy to move. 
  viewer.get_gridLayout().set_splitterSize(7); 
 
  // Create a cell name var 
  cellName = "MedicalCell" + Date.now(); 
 
  // Create a cell. It will contain an image or a series of images, based on how many Frames are added (see below for more details). 
  const cell = new lt.Controls.Medical.Cell(viewer, viewer.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. 
  viewer.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. 
  const 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 web service demo. 
  const 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. 
      authenticationCode = encodeURIComponent(this.responseText); 
 
      // now, this is the MRTI info that contains the image information, width, height, tiles....etc. 
      const 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(256, 256); 
      mrtiInfo.frameIndex = 0; 
 
      // does this image support window level. 
      mrtiInfo.supportWindowLevel = true; 
 
      // different resolution for the image. 
      const resolutions = [ 
        { width: 2460, height: 2970 }, 
        { width: 1230, height: 1485 }, 
        { width: 615, height: 742 }, 
        { width: 307, height: 371 }, 
        { width: 153, height: 185 }, 
        { width: 76, height: 92 }, 
      ]; 
      mrtiInfo.resolutions = []; 
      for (let 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, 
      let imageUri = 
        "http://localhost/MedicalViewerServiceAsp23/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.114257.1.9.1245.56421.52314.1187852.12457"; 
 
      mrtiInfo.imageUri = imageUri; 
 
      // 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. 
      const imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
 
      // set the image width and height. 
      imageInfo.width = 2460; 
      imageInfo.height = 2970; 
 
      // bits per pixel for the image 
      imageInfo.bitsPerPixel = 16; 
      // low and high bit. 
      imageInfo.lowBit = 0; 
      imageInfo.highBit = 11; 
 
      // other information, setting some of them to zero means that the toolkit will try and calculate it by itself, but you can always get those values from the DicomDataSet. 
      imageInfo.modalityIntercept = 0; 
      imageInfo.modalitySlope = 1; 
      imageInfo.minValue = 0; 
      imageInfo.maxValue = 0; 
      imageInfo.windowWidth = 0; 
      imageInfo.windowCenter = 0; 
      imageInfo.signed = false; 
      imageInfo.photometricInterpretation = "MONOCHROME1"; 
      imageInfo.firstStoredPixelValueMapped = 0; 
 
      // 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", 
    "http://localhost/MedicalViewerServiceAsp23/api/auth/AuthenticateUser", 
    true 
  ); 
  xhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); 
  // Add the userName and password as set in the PACSDatabaseConfig demo application located in `<INSTALL_DIR>\LEADTOOLS23\Bin\DotNet4\x64`. 
  xhttp.send( 
    JSON.stringify({ 
      userName: "<Medical Web Service User Name>", 
      password: "<Medical Web Service Password>", 
      userData: "", 
    }) 
  ); 
 
  // [optional] Add an action that allows the user to move the loaded image using either the mouse or by touch and drag. we are adding an offset action. 
  cell.setCommand(1, new lt.Controls.Medical.OffsetAction()); 
 
  // [optional] Add an action that allows the user to do window level on the image. 
  cell.setCommand(2, new lt.Controls.Medical.WindowLevelAction()); 
 
  // [optional] Run the action. Now if the user clicks or touches the image and drags it, the image will move correspondingly. 
  cell.runCommand(2); 
 
  // [optional] Create an overlay text that will appear at the top of the loaded image. 
  const overlay = new lt.Controls.Medical.OverlayText(); 
 
  // [optional] Set the aligment for the overlay text. 
  overlay.set_alignment(lt.Controls.Medical.OverlayAlignment.topLeft); 
 
  // [optional] Set the row index of overlay text. 
  overlay.set_positionIndex(0); 
 
  // [optional] add window level overlay text, this will change when you click and drag the mouse. 
  overlay.set_type(lt.Controls.Medical.OverlayTextType.windowLevel); 
 
  // [optional] Add this overlay to the overlay list of the cell. Currently there is only one overlay, but the user can add multiple overlay texts. 
  cell.get_overlays().add(overlay); 
 
  alert( 
    "-Hold left mouse button and drag to change the image window level \n-Double click to expand the view area \n-Double click again to return to the previous view area." 
  ); 
};

Run the Project

Open the command line console, then cd into the root of the project. Use the following command to run a static file server: http-server .

The server should start and run on http:localhost:8080. A message should appear in the console indicating all the ports that the server is available on. Open your browser and navigate to: http://localhost:8080/index.html

Wrap-up

This tutorial showed how to add the necessary references to load and display a DICOM image with annotation functionality. In addition, it showed how to use the MedicalViewer object.