在LEADTOOLS HTML5 医学浏览器中显示一个图像

采取以下步骤在LEADTOOLS HTML5医学浏览器中显示图像：

1.创建一个新的html文件并将其命名为display.html并将以下HTML5模板代码复制到文件中：

<!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.Core.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="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>

2.在与html相同的位置创建名为lib的文件夹，并将LEADTOOLS JavaScript文件复制到此文件夹。 可以找到这些文件"<LEADTOOLS_INSTALLDIR>\Bin\JS":

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

--这个HTML包含了在应用程序中使用LEADTOOLS JavaScript Image Viewer所需的最低代码。 
--Leadtools.js 是所有其他库都需要的LEADTOOLS JS的内核。
--Leadtools.Controls.js 包含基本的图像浏览功能。 
--Leadtools.Annotations.Core.js,Leadtools.Annotations.Automation.js, Leadtools.Annotations.Designers.js 和 Leadtools.Annotations.Rendering.JavaScript.js contain the annotations 包含由医学观察者处理的注释功能。 
--Leadtools.Controls.Medical.js 包含保存医学图像的医学图像查看器，并包含各种医疗功能，如窗位，参考线，MPR等。 所有这些JS文件都被添加到HTML的头部。

3.创建一个包含下面的JavaScript代码的app.js。

window.onload = function () { 
    // Get the parent DIV 
   var imageViewerDiv = document.getElementById("MedicalViewerParentDiv"); 
 
   // Create the medical viewer control, and specify the number or rows and columns. 
   var 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). 
   var 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. 
   var cellFrame = new lt.Controls.Medical.Frame(cell); 
    
   // Add the frame to the cell class. 
   cell.get_frames().add(cellFrame); 
    
   // Now load an image inside the frame by using the following method (and change the url to a valid image url). 
   cellFrame.set_imageURL("http://xxx.jpg"); 
    
   // [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] Run the action. Now if the user clicks or touches the image and drags it, the image will move correspondingly. 
   cell.runCommand(1); 
    
   // [optional] Create an overlay text that will appear at the top of the loaded image. 
   var 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] Specify that this overlay text is filled by the user through the method (set_text) which is called after this line. 
   overlay.set_type(lt.Controls.Medical.OverlayTextType.userData); 
    
   // [optional] Specify the overlay text. 
   overlay.set_text("testing overlay text"); 
    
   // [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); 
};