采取以下步骤控制医学图像查看器中显示一个图像:
创建一个新的HTML文件和名称display.html和下面的HTML5模板复制到文件:
<! DOCTYPE html><html lang = "恩" xmlns = " http://www.w3.org/1999/xhtml "><头><元charset =“utf - 8”/><标题>LEADTOOLS演示</标题><!——LEADTOOLS库><type = " text / javascript脚本“src =“lib / Leadtools.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Controls.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Annotations.Engine.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Annotations.Designers.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Annotations.Rendering.JavaScript.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Annotations.Automation.js”></脚本><type = " text / javascript脚本“src =“lib / Leadtools.Controls.Medical.js”></脚本><type = " text / javascript脚本“src =“app.js”></脚本></头><身体><!——DIV使用的容器LEADTOOLS图像查看器—><div id =“MedicalViewerParentDiv”风格= "宽度:600 px;身高:600 px;background - color: darkgray”></ div></身体></ html>
创建一个文件夹命名自由在同一位置的HTML和LEADTOOLS JavaScript文件复制到这个文件夹。这些文件可以在“< LEADTOOLS_INSTALLDIR > \ Bin \ JS”:
Leadtools.jsLeadtools.Controls.jsLeadtools.Annotations.Engine.jsLeadtools.Annotations.Designers.jsLeadtools.Annotations.Rendering.JavaScript.jsLeadtools.Annotations.Automation.jsLeadtools.Controls.Medical.jsHTML包含所需的最小代码使用LEADTOOLS JavaScript图像查看器应用程序中。
Leadtools.js的内核是LEADTOOLS JavaScript支持和所有其他所需的库。Leadtools.Controls.js包含基本的图像浏览器功能。Leadtools.Annotations.Engine.js,Leadtools.Annotations.Automation.js,Leadtools.Annotations.Designers.js和Leadtools.Annotations.Rendering.JavaScript.js包含注释功能,将由医疗查看器。Leadtools.Controls.Medical.js包含医学图像查看器包含医学图像,并包含各种医疗功能,如窗口水平参考线,MPR…等。所有这些JS文件添加到HTML的头部分。接下来,创建一个HTML DIV元素作为观众的容器。
,创建app.js将包含JavaScript代码来创建和使用查看器。
display.html并添加以下代码:窗口。onload =函数(){/ /得到父DIVvarimageViewerDiv = . getelementbyid (“MedicalViewerParentDiv”);/ /创建医疗查看器控制,并指定或行和列的数量。var观众=新lt.Controls.Medical。医疗Viewer(imageViewerDiv, 2, 2);/ /(可选)更新分配器的大小,使它成为厚,容易移动。viewer.get_gridLayout () .set_splitterSize (7);/ /创建一个单元名称varcellName =“MedicalCell”+ Date.now ();/ /创建一个单元格。它将包含一个图像或一系列的图像,基于多少帧添加更多的细节(见下文)。var细胞=新lt.Controls.Medical。细胞(观众,viewer.get_divId (), 1, 1);/ /显示边界设置为“true”,显示边界周围的细胞。cell.set_showFrameBorder (真正的);/ /添加细胞观众。viewer.layout.get_items阀门()(细胞);/ /(可选)选择细胞(也可以选择通过点击它。)cell.set_selected (真正的);/ /创建一个框架对象这将图像细胞内。varcellFrame =新lt.Controls.Medical.Frame(细胞);/ /添加细胞类的框架。cell.get_frames阀门()(cellFrame);/ /我们现在要下载一个图像从leadtools医疗观众演示网站,你需要改变这种从数据库下载图片。varxhttp =新XMLHttpRequest ();xhttp。onreadystatechange =函数(数据){如果(这.readyState = = 4 & &这.status = = 200){/ /在这里我们得到了验证代码,我们需要从leadtools数据库检索的图像。authenticationCode = encodeURIComponent (这.responseText);/ /现在,这个MRTI信息包含的图像信息,宽度,高度,瓷砖....等等。varmrtiInfo =新lt.Controls.Medical.MRTIImage ();/ /图像dpi。mrtiInfo。fullDpi = lt.LeadSizeD。创建(150、150);/ /瓷砖大小,推荐值为256mrtiInfo。tileSize = lt.LeadSizeD。创建(256、256);mrtiInfo.frameIndex = 0;/ /这张图片是否支持窗口高度”。mrtiInfo。supportWindowLevel =真正的;/ /不同分辨率的图像。var决议= [{“宽度”:2460,“高度”:2970},{“宽度”:1230,“高度”:1485},{“宽度”:615,“高度”:742},{“宽度”:307,“高度”:371},{“宽度”:153,“高度”:185},{“宽度”:76,“高度”:92});mrtiInfo。决议= [];为(var我= 0;我< resolutions.length;我+ +){mrtiInfo。决议[我]= lt.LeadSizeD.create(决议[我]。宽度,决议[我].height);}/ /图像的宽度和高度。cellFrame.set_width (mrtiInfo.resolutions [0] .width);cellFrame.set_height (mrtiInfo.resolutions [0] .height);/ /图片全尺寸。mrtiInfo。实际大小的= lt.LeadSizeD.create (cellFrame.get_width (), cellFrame.get_height ());/ /现在我们需要图像URL,varimageUri =“https://demo.leadtools.com/MedicalViewerService20/ObjectRetrieveService.svc”;imageUri + =“/ GetImageTile ? auth = ";imageUri + = authenticationCode;/ /这个图片实例UID,改变这一如果你想获取什么。imageUri + =“实例= 1.3.251.1146.3891.2001006.1752215.5”;mrtiInfo。imageUri = imageUri;/ /设置此信息到细胞框架。cellFrame。mrtiInfo =mrtiInfo;/ /现在我们需要设置图像的信息我们可以做窗口的水平。varimageInfo =新lt.Controls.Medical.DICOMImageInformation ();/ /设置图片的宽度和高度。imageInfo。宽度= 2460;imageInfo。身高= 2970;/ /位/像素的图像imageInfo。bitsPerPixel = 16;/ /低和高一些。imageInfo。lowBit = 0;imageInfo。highBit = 11;/ /其他信息,其中一些为零意味着工具箱将试着计算它本身,但你总可以从DicomDataSet这些值。imageInfo。modalityIntercept = 0;imageInfo。modalitySlope = 1;imageInfo。minValue = 0;imageInfo。maxValue = 0;imageInfo。windowWidth = 0;imageInfo。windowCenter = 0;imageInfo。签署了=假;imageInfo。photometricInterpretation =“MONOCHROME1”;imageInfo。firstStoredPixelValueMapped = 0;/ /设置这些信息框架。cellFrame.set_information (imageInfo);}};/ /我们这里从Leadtools获取图像数据库,我们需要登录验证码。xhttp.open (“职位”,“https://demo.leadtools.com/MedicalViewerService20/AuthenticationService.svc/AuthenticateUser”,真正的);xhttp.setRequestHeader (“内容类型”,application / json的;charset = utf - 8 ');/ /我们登录“客人”,调用下面的线后,我们将收到上面的验证码通过“onreadystatechange”发送。xhttp.send (JSON。stringify({用户名:“客人”,密码:“客人”用户数据:”}));/ /(可选)添加一个动作,允许用户移动加载图像使用鼠标或通过触摸和阻力。我们添加一个抵消作用。cell.setCommand (1,新lt.Controls.Medical.OffsetAction ());/ /(可选)添加一个操作,允许用户在图像窗口水平。cell.setCommand (2新lt.Controls.Medical.WindowLevelAction ());/ /(可选的)运行操作。现在,如果用户点击或触摸图像并将其拖拽,将相应的图像。cell.runCommand (2);/ /(可选的)创建一个覆盖文本将出现在加载图像的顶部。var覆盖=新lt.Controls.Medical.OverlayText ();/ /组(可选)的线条覆盖文本。overlay.set_alignment (lt.Controls.Medical.OverlayAlignment.topLeft);/ /(可选)设置覆盖的行索引文本。overlay.set_positionIndex (0);/ /(可选)添加窗口水平叠加文字,这将改变当你单击并拖动鼠标。overlay.set_type (lt.Controls.Medical.OverlayTextType.windowLevel);/ /(可选)添加这个叠加覆盖列表的单元格。目前只有一个覆盖,但用户可以添加多个覆盖文本。cell.get_overlays阀门()(覆盖);alert (“零左键并拖动改变图像窗口\ \ n-Double点击扩展视图区域n-Double再次单击返回前面的视图区域。”);};
HTML5来测试它。