LEADTOOLS HTML5 SDK使用教程：DICOM圖像註釋

時間 2019-11-12

標籤 leadtools html5 html sdk 使用教程 dicom 圖像註釋欄目 HTML5 简体版

原文原文鏈接

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

LEADTOOLS HTML5 DICOM Viewer功能介紹：canvas

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工具修改現有註釋。app

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

加載和保存註釋功能對醫療應用程序的工做流程是很是重要的。首先，它們用於說明和指出圖像中注意的事項。固然，最重要的仍然是圖像自己，因此最好可以隱藏和顯示註釋。spa

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

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

 
        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設備上的圖像和註釋效果：blog

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