VintaSoft Imaging .NET SDK 11.0 for Web
In This Topic
    View images in HTML5 web browser
    In This Topic

    1. JavaScript UI control for image viewing in HTML5 web browser

    The Vintasoft.Imaging.UI.WebImageViewerJS class is a JavaScript control for viewing 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 and rendering an image. As the web service can be used ASP.NET Core Web API controller (ASP.NET Core), ASP.NET Web API 2 controller (ASP.NET MVC 5), or any other .NET compatible web service.

    Tutorials, which describe how to embed the HTML5 image viewer into an ASP.NET application can be found here:

    Vintasoft.Imaging.UI.WebImageViewerJS can work separately and in this case:
    Vintasoft.Imaging.UI.WebImageViewerJS can work as a slave viewer of another Vintasoft.Imaging.UI.WebImageViewerJS or Vintasoft.Imaging.UI.WebThumbnailViewerJS, and in this case:
    Here is an example that demonstrates how to load images to a HTML5 image viewer and select the last image for displaying:
    // create images
    var imageSource = new Vintasoft.Shared.WebImageSourceJS("/Images/SourceImage.pdf");
    var image1 = new Vintasoft.Shared.WebImageJS(imageSource, 0);
    var image2 = new Vintasoft.Shared.WebImageJS(imageSource, 1);
    // create an image viewer
    var imageViewer1 = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1");
    // get an image collection of image viewer
    var images = imageViewer1.get_Images();
    // add images to the image collection
    images.addRange([image1, image2]);
    // set focus to the last image in image collection
    imageViewer1.set_FocusedIndex(images.get_Count() - 1);

    1.1. Preview of images

    1.1.1. Image viewer display mode

    Vintasoft.Imaging.UI.WebImageViewerJS can display one or several images simulateously.

    The Vintasoft.Imaging.UI.WebImageViewerJS.set_DisplayMode function allows to set one of the predefined display modes:
    Also Vintasoft.Imaging.UI.WebImageViewerJS allows to define the custom image display mode using the following functions:

    1.1.2. Image preview modes

    Vintasoft.Imaging.UI.WebImageViewerJS can preview image in different modes.

    The Vintasoft.Imaging.UI.WebImageViewerJS.set_ImageSizeMode function allows to set one of the predefined preview modes:

    1.1.3. Image appearance

    Vintasoft.Imaging.UI.WebImageViewerJS allows to specify the appearance (background brush, background color, border color, border width, border style) for focused image using the Vintasoft.Imaging.UI.WebImageViewerJS.set_FocusedImageAppearance function and for not focused images using the Vintasoft.Imaging.UI.WebImageViewerJS.set_ImageAppearance function.

    1.1.4. Rendering settings

    Vector images/documents, for example PDF documents, must be rendered before preview in the Vintasoft.Imaging.UI.WebImageViewerJS.

    Rendering settings for vector images/documents can be set with the Vintasoft.Imaging.UI.WebImageViewerJS.set_RenderingSettings function.

    1.1.5. Rotation of image

    The Vintasoft.Imaging.UI.WebImageViewerJS.set_ImageRotationAngle function allows to set an orthogonal rotation angle of image in the image viewer.

    1.1.6. Caching images on the server

    The Vintasoft.Imaging.UI.WebImageViewerJS.set_UseCache function allows to specify whether caching of the image tiles on server is necessary.

    If web viewer uses cache:
    1. Web API will render image tile on server side and save image tile on server in folder "<WebApplicationPath>\VintasoftCache\<SessionId>\Tiles\".
    2. Web API will send URL to rendered image tile to the web viewer.
    3. Web viewer will receive URL to image tile from Web API, web browser will download image from URL into browser cache and display image to the user.
    4. Rendered image tile will be stored on client computer until browser cache will not be cleared.
    5. Rendered image tile will be stored on server until web application cache (folder "<WebApplicationPath>\VintasoftCache\<SessionId>\Tiles\") will not be cleared.

    If web viewer does not use cache:
    1. Web API will render image tile on server side and send image as base64 string to the web browser. Rendered image will NOT be saved on server.
    2. Web viewer will receive rendered image as base64 string from server, web browser will display image to the user.
    3. Rendered image will be destroyed when user closed web browser.

    Web application, which uses cache on server, uses image tile from cache if image tile was rendered earlier. Web application, which does not use cache on server, always re-render image tile. Web application, which uses cache, in most cases works faster than web application, which does not use cache.

    1.2. Context menu of image viewer

    Vintasoft.Imaging.UI.WebImageViewerJS.get_ContextMenuFunc allows to get the handler for "contextmenu" event of the viewer.
    Vintasoft.Imaging.UI.WebImageViewerJS.set_ContextMenuFunc allows to set the handler for "contextmenu" event of the viewer.

    1.3. Visual tools

    The visual tools complement the functionality of Vintasoft.Imaging.UI.WebImageViewerJS class and allow to process images visually.

    The active visual tool of the Vintasoft.Imaging.UI.WebImageViewerJS can be set using Vintasoft.Imaging.UI.WebImageViewerJS.set_VisualTool function.

    More detailed information about visual tools can be found here: "Visual tools for HTML5 image viewer."

    2. Web Document Viewer UI for image viewing in HTML5 web browser

    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 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.

    Here is screenshot of image viewer panel in web application: