采取以下步骤控制医学图像查看器中显示一个图像:
创建一个新的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.js
Leadtools.Controls.js
Leadtools.Annotations.Engine.js
Leadtools.Annotations.Designers.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Annotations.Automation.js
Leadtools.Controls.Medical.js
HTML包含所需的最小代码使用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 =函数(){
/ /得到父DIV
varimageViewerDiv = . getelementbyid (“MedicalViewerParentDiv”);
/ /创建医疗查看器控制,并指定或行和列的数量。
var观众=新lt.Controls.Medical。医疗Viewer(imageViewerDiv, 2, 2);
/ /(可选)更新分配器的大小,使它成为厚,容易移动。
viewer.get_gridLayout () .set_splitterSize (7);
/ /创建一个单元名称var
cellName =“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);
/ /瓷砖大小,推荐值为256
mrtiInfo。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
来测试它。