Show DICOM metadata over image in web DICOM viewer

In This Topic

VintaSoft Web DICOM Viewer allows to display the text overlays over image in web DICOM viewer. Text overlay is represented by WebDicomTextOverlayJS class and allows to specify text, text anchor, text format, text font, overlay visibility.

The WebDicomViewerBaseControlJS.get_TextOverlays function allows to get collection that contains text overlays, which are shown in DICOM viewer.

Here is JavaScript code that shows how to add a text overlay with DICOM tag value to the DICOM viewer:

JavaScript

/**
 Adds a text overlay with DICOM tag value to the DICOM viewer.
 @param {object} dicomControl An instance of Vintasoft.Imaging.Dicom.WebDicomControlJS class.
*/
function addTextOverlayWithDicomTagValueToDicomViewer(dicomControl) {
    // get DICOM viewer that is used in DICOM control
    var dicomViewerControl = dicomControl.get_DicomViewerControl();

    // get file metadata from DICOM image
    var fileMetadata = dicomViewerControl.get_FocusedImage().get_FileMetadata();

    // zero-based index of metadata element
    var metadataElementIndex = 1;
    // get metadata element
    var metadataElement = fileMetadata[metadataElementIndex];
    // get element identifier
    var medataElementId = metadataElement.get_ElementId();

    // create anchor that defines position of text overlay
    var anchor = new Vintasoft.Imaging.Primitives.WebAnchorTypeEnumJS("Top");

    // create text overlay for metadata element
    var textOverlay = new Vintasoft.Imaging.Dicom.WebDicomMetadataTextOverlayJS(anchor, medataElementId);

    // get the text overlay collection that is used by DICOM viewer
    var textOverlayCollection = dicomViewerControl.get_TextOverlays();
    // add text overlay to the text overlay collection
    textOverlayCollection.add(textOverlay);

    // redraw DICOM viewer
    dicomViewerControl.update();
}

Here is JavaScript code that shows how to add a text overlay with static text to the DICOM viewer:

JavaScript

/**
 Adds a text overlay with static text to the DICOM viewer.
 @param {object} dicomControl An instance of Vintasoft.Imaging.Dicom.WebDicomControlJS class.
*/
function addTextOverlayWithStaticTextToDicomViewer(dicomControl) {
    // get DICOM viewer that is used in DICOM control
    var dicomViewerControl = dicomControl.get_DicomViewerControl();

    // create anchor that defines position of text overlay
    var anchor = new Vintasoft.Imaging.Primitives.WebAnchorTypeEnumJS("Top");

    // create text overlay
    var textOverlay = new Vintasoft.Imaging.Dicom.WebDicomTextOverlayJS(anchor);

    // set text for text overlay
    textOverlay.set_Text("Test");

    // get the text overlay collection that is used by DICOM viewer
    var textOverlayCollection = dicomViewerControl.get_TextOverlays();
    // add text overlay to the text overlay collection
    textOverlayCollection.add(textOverlay);

    // redraw DICOM viewer
    dicomViewerControl.update();
}

Here is JavaScript code that shows how to change a text overlay in DICOM viewer:

JavaScript

/**
 Changes a text overlay in DICOM viewer.
 @param {object} dicomControl An instance of Vintasoft.Imaging.Dicom.WebDicomControlJS class.
*/
function changeOverlayTextInDicomViewer(dicomControl) {
    // get DICOM viewer that is used in DICOM control
    var dicomViewerControl = dicomControl.get_DicomViewerControl();

    // get text overlay collection
    var textOverlayCollection = dicomViewerControl.get_TextOverlays();

    // zero-based index of overlay element that shoud be changed
    var overlayElementIndex = 9;
    var overlayElement = textOverlayCollection.getItem(overlayElementIndex);


    // set new position for overlay
    overlayElement.set_Anchor(new Vintasoft.Imaging.Primitives.WebAnchorTypeEnumJS("TopLeft"));

    // set new text for overlay
    overlayElement.set_Text("Test");


    // create new font properties for overlay text

    var fontName = "Calibri";
    var fontSize = 20;
    var fontColor = "rgb(255,0,0)";
    var isBold = false;
    var isItalic = false;
    var isUnderline = false;
    var isStrikeout = false;

    var fontProperties = overlayElement.get_FontProperties();
    if (fontProperties != null) {
        isBold = fontProperties.get_IsBold();
        isItalic = fontProperties.get_IsItalic();
        isUnderline = fontProperties.get_IsUnderline();
        isStrikeout = fontProperties.get_IsStrikeout();
    }

    fontProperties = new Vintasoft.Imaging.Dicom.WebVintasoftFontPropertiesJS(fontName, fontSize, fontColor, isBold, isItalic, isUnderline, isStrikeout);
    // set new font properties for overlay
    overlayElement.set_FontProperties(fontProperties);


    // redraw DICOM viewer
    dicomViewerControl.update();
}

Here is JavaScript code that shows how to remove text overlays from DICOM viewer:

JavaScript

/**
 Removes text overlays from DICOM viewer.
 @param {object} dicomControl An instance of Vintasoft.Imaging.Dicom.WebDicomControlJS class.
*/
function removeTextOverlaysFromDicomViewer(dicomControl) {
    // get DICOM viewer that is used in DICOM control
    var dicomViewerControl = dicomControl.get_DicomViewerControl();

    // get the text overlay collection that is used by DICOM viewer
    var textOverlayCollection = dicomViewerControl.get_TextOverlays();

    // zero-based index of text overlay that must be removed from the text overlay collection
    var overlayElementIndex = 9;
    // get overlay element
    var overlayElement = textOverlayCollection.getItem(overlayElementIndex);
    // remove overlay element from the text overlay collection
    textOverlayCollection.remove(overlayElement);

    // zero-based index of overlay element that must be removed from the text overlay collection
    overlayElementIndex = 10;
    // remove overlay element by index
    textOverlayCollection.removeAt(overlayElementIndex);

    // redraw DICOM viewer
    dicomViewerControl.update();
}

Send Feedback