在LEADTOOLS構建HTML5 DICOM/PACS查看器（一）一文中，我們介紹了LEADTOOLS的 PACS查詢/檢索和客戶端調窗功能。本文，我們將繼續深入了解HTML5 DICOM查看器以及客戶端注釋和標記。

LEADTOOLS HTML5 DICOM Viewer功能介紹：

• HTML5/JavaScript Viewer Control可創建跨平臺的圖像查看功能
• 同時支持鼠標和多點觸控（手勢）輸入
• 擁有醫學影像“調窗”、Series Stack和圖像處理等功能
• 隨時隨地通過本地存檔或DICOM通信連接遠程PACS查看DICOM圖像
• 原生HTML5圖像注釋和標記
• 完整的HTML5 DICOM查看器源代碼

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);
}

 要使用注解，接下來需要做的是選擇你所希望繪制的對象，或使用選擇工具來修改現成的注釋。本演示中包含了幾個按鈕，點擊按鈕可以啟用所需的注釋工具。你可以根據需要啟用或禁用某些按鈕，但是本示例中自帶了醫療行業中最常用的注釋（箭頭，矩形，橢圓，文本，高亮，尺子，Poly Ruler和量角器）。下列代碼片段展示了幾個按鈕的點擊事件：

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服務加載和保存注釋

 加載和保存注釋的功能對醫療應用的工作流至關重要。首先，他們可以描述、指出或在圖像中標附注。最重要的一點仍然是圖像本身，因此注釋可以被隱藏或恢復。DICOM查看器也具有協作性。放射科醫生，護士，醫生和病人都可以看看圖片，并通過注釋和說明獲取第二意見。由于這是一個Web應用程序，因此用戶可以通過電腦、平板電腦或移動設備等查看圖像和注釋。

 LEADTOOLS使用RESTful web服務加載和保存注釋。如下圖所示，第一步是獲得一個描述和繪制注釋的圖像幀。這兩部分信息通過JSON發送至userData參數， LEADTOOLS 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();
}
}

 如果圖像帶有注釋，則加載按鈕被啟用。點擊加載按鈕，調出帶有與幀相關注釋的對話框。用戶選擇注釋文件后，下列代碼會從服務器獲取注釋數據，然后開始將注釋添加至畫布。

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");
}
}

下面截圖顯示了從iPhone中加載的相同圖像和注釋的效果：