采取以下步骤在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>
- 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 DIVvar 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 varcellName = '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);};
4.在支持HTML5的浏览器中启动该页面进行测试
.K1AHo.png)
