利用HTML5和JavaScript構建一個完整的DICOM Viewer涉及到許多的重要功能。LEADTOOLS醫療圖像開發包提供了創建零足跡DICOM Viewer所需的所有功能：圖像顯示、圖像處理、客戶端醫學影像“調窗”、Series Stack和注釋等。接下來，我們將深入介紹HTML5 DICOM Viewer、PACS查詢/檢索以及醫學影像“調窗”等功能。

LEADTOOLS HTML5 DICOM Viewer功能介紹：

• HTML5/JavaScript查看器控件
• 鼠標和多點觸控手勢輸入
• 包含快速客戶端醫學影像“調窗”工具、Series Stack、圖像處理等功能
• 從您本地的歸檔或一個遠程的PACS使用DICOM通信，在您的桌面、平板電腦或移動設備上查看DICOM圖像的任何地方。
• 本地HTML5圖像注解和標記。

DICOM圖像HTML5注釋

一旦選中DICOM系列，圖像開始鏈接到查看器，并且注解實現初始化。完成AnnAutomationManager對象的創建并連接到查看器。

function initializeAnnotations() {
_automationManager = new Leadtools.Annotations.Automation.AnnAutomationManager();

_automationManager.createDefaultObjects();

_automationManager.findObjectById(Leadtools.Annotations.Core.AnnObject.rulerObjectId).get_objectTemplate().set_measurementUnit(6);
_automationManager.findObjectById(Leadtools.Annotations.Core.AnnObject.polyRulerObjectId).get_objectTemplate().set_measurementUnit(6);
_automationManager.findObjectById(Leadtools.Annotations.Core.AnnObject.protractorObjectId).get_objectTemplate().set_measurementUnit(6);

var divElemnt = document.getElementById("ViewerParent");
_overlayCanvas = document.createElement("canvas");

_overlayCanvas.id = "overlayCanvas";

_overlayCanvas.width = $(divElemnt).width();
_overlayCanvas.height = $(divElemnt).height();

var parent = document.getElementById(_leadViewer.get_canvasId()).parentNode;

parent.appendChild(_overlayCanvas);

_automationInteractiveMode = new Leadtools.Annotations.Automation.ImageViewerAutomationControl(_leadViewer);
}

使用注釋前，你需要選擇所需要繪制的對象，或者使用Select工具修改現有注釋。

function OnAnnotationSelect() {
if (null != _leadViewer && null != _currentAutomation && _annotationSelect.enabled) {
AutomationService();
_currentAutomation.get_manager().set_currentObjectId(Leadtools.Annotations.Core.AnnObject.selectObjectId);
}
}
function OnAnnotationArrow() {
if (null != _leadViewer && null != _currentAutomation && _annotationArrow.enabled) {
AutomationService();
_currentAutomation.get_manager().set_currentObjectId(Leadtools.Annotations.Core.AnnObject.pointerObjectId);
}
}

function OnAnnotationText() {
if (null != _leadViewer && null != _currentAutomation && _annotationText.enabled) {
AutomationService();
_currentAutomation.get_manager().set_currentObjectId(Leadtools.Annotations.Core.AnnObject.textObjectId);
}
}

利用Web服務加載和保存注釋

加載和保存注釋功能對醫療應用程序的工作流程是非常重要的。首先，它們用于說明和指出圖像中注意的事項。當然，最重要的仍然是圖像本身，所以最好能夠隱藏和顯示注釋。

function DoSaveAnn(annotationsData) {
var firstFrame = _dicomLoader.GetFrame(0);
var description = $('#annSaveDescText').val();

if (!description) {
alert("You must enter a description");
return;
}

var series = firstFrame.Instance.SeriesInstanceUID;
var userData = { Description: description,
ReferencedSOPInstance: firstFrame.Instance.SOPInstanceUID
};

annotationsProxy.SaveAnnotations(series, annotationsData, JSON.stringify(userData), SaveAnnotationsError, SaveAnnotationsSuccess);
}

當圖像幀被加載完后，應用程序會進行快速的權限檢查，然后檢索與圖像關聯的先前保存的注釋文件數組。

function OnSeriesLoaded(args, frames) {
_overlayManager.SetOverlayTags(frames);

if (_userPermissions.CanViewAnnotations) {
annotationsProxy.FindSeriesAnnotations(frames[0].Instance.SeriesInstanceUID,
FindAnnotationsError, FindAnnotationsSuccess);
}
}

function FindAnnotationsSuccess(annotations) {
if (annotations && annotations.length > 0) {
_loadedAnnotationsIds = annotations;
EnableAnnotationLoad();
}
else {
_loadedAnnotationsIds = null;

DisableAnnotationLoad();
}
}

如果圖像有注釋，則加載按鈕被啟用。單擊“加載”按鈕會彈出一個與圖像關聯的注釋對話框。用戶選擇一個注釋文件后，下列代碼可以從服務器獲取注釋數據，然后將注釋添加至canvas。

下圖為iPhone設備上的圖像和注釋效果：

function LoadSelectedServerAnn() {
var annID = _loadedAnnotationsIds[parseInt($($(".annItemSelected")[0]).attr("annIndex"))];

annotationsProxy.GetAnnotations(annID.AnnotationID, GetAnnotationsError, GetAnnotationsSuccess);
}

function GetAnnotationsSuccess(annotationsData) {
if (annotationsData) {
try {
var length = _automationArray.length;
var codecs = new Leadtools.Annotations.Core.AnnCodecs();

while (length--) {
var frame = _dicomLoader.GetFrame(length);
var automation = _automationArray[length];
var container = automation.get_container();
var destChildren = container.get_children();
var instanceNumber = frame.Instance.InstanceNumber;

var loadContainer = codecs.loadFromXmlDocument(annotationsData, parseInt (instanceNumber));

if (loadContainer) {
var srcChildren = loadContainer.get_children();
var childrenCount = srcChildren.get_count();

for (var i = 0; i < childrenCount; i++) {
var child = srcChildren.get_item(i);
destChildren.add(child);
}

automation.get_automationControl().automationInvalidate();
}
}

alert("Annotations Loaded");
}
catch (er) {
alert('Invalid annotations data.\n\r' + er );
}
}
else {
alert("No annotations found");
}
}