VintaSoft Imaging .NET SDK v8.8 for Web
In This Topic
    View images with annotations in web browser with HTML5 support
    In This Topic

    1. JavaScript UI control for viewing images with annotations in web browser with HTML5 support

    The Vintasoft.Imaging.Annotation.UI.WebAnnotationViewerJS class is a JavaScript control for viewing images with annotations and annotating images in any HTML5 compatible web browser. The class can be created on a client-side of web application. The class requires a web service for getting information about image, rendering an image and serializing/deserializing of annotations. As the web service can be used ASP.NET Web API 2 controller (ASP.NET MVC 5), ASP.NET Web API controller (ASP.NET MVC 4) or any other .NET Framework compatible web service.

    Vintasoft.Imaging.Annotation.UI.WebAnnotationViewerJS class complements the functionality of Vintasoft.Imaging.UI.WebImageViewerJS class and:

    Here is an example that demonstrates how to start building of rectangular annotation in annotated HTML5 image viewer:
    // create an annotation viewer
    var annotationViewer1 = new Vintasoft.Imaging.Annotation.Html5.WebAnnotationViewerJS("WebAnnotationViewer1");
    // create a rectangle annotation
    var rectangle = new Vintasoft.Imaging.Annotation.Html5.WebRectangleAnnotationViewJS();
    // start building of annotation
    annotationViewer1.addAndBuildAnnotation(rectangle);
                                
    



    2. Web Document Viewer UI for viewing images with annotations in web browser with HTML5 support

    Web Document Viewer UI always has image/annotation viewer.

    The WebUiImageViewerPanelJS class represents a web UI panel that can be used in web document viewer and allows to display an image viewer.
    Panel will create HTML5 image viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Html5.js file and if "annotations" flag is NOT enabled in web document viewer settings.
    Panel will create SVG image viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Svg.js file and if "annotations" flag is NOT enabled in web document viewer settings.
    Panel will create HTML5 annotation viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Html5.js and Vintasoft.Imaging.Annotation.Html5.js files and if "annotations" flag is enabled in web document viewer settings.
    Panel will create SVG annotation viewer if Vintasoft.Imaging.DocumentViewer.js file is used together with Vintasoft.Imaging.Svg.js and Vintasoft.Imaging.Annotation.Svg.js files and if "annotations" flag is enabled in web document viewer settings.

    Here is screenshot of annotation viewer panel in web application:



    Here is an example of JavaScript code, which demonstrates how to add the panel with annotation viewer into web document viewer:

    // create the default web document viewer settings with annotations support
    var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
    
    // create the document viewer
    var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
    
    // get items of document viewer
    var items = docViewerSettings.get_Items();
    
    // get the main menu of document viewer
    var mainMenu = items.getItemByRegisteredId("mainMenu");
    // if main menu is found
    if (mainMenu != undefined) {
        // get items of main menu
        var mainMenuItems = mainMenu.get_Items();
    
        // add "Annotation" menu panel
        mainMenuItems.addItem("annotationsMenuPanel");
    }