LEADTOOLS構建HTML5 DICOM/PACS查看器（part 2）

在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中加載的相同圖像和註釋的效果：