VintaSoft Imaging .NET SDK v8.6
In This Topic
    HTML5 image viewer
    In This Topic

    The Vintasoft.Imaging.Html5.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 Web API controller (ASP.NET MVC 4) or Web API 2 controller (ASP.NET MVC 5).

    A step-by-step guide, which describes how to embed the HTML5 image viewer into an ASP.NET MVC 4 application can be found here:
    "How to add the web image and thumbnail viewers to an ASP.NET MVC 4 application?"
    A step-by-step guide, which describes how to embed the HTML5 image viewer into an ASP.NET MVC 5 application can be found here:
    "How to add the web image and thumbnail viewers to an ASP.NET MVC 5 application?"


    Vintasoft.Imaging.Html5.WebImageViewerJS can work separately and in this case:

    Vintasoft.Imaging.Html5.WebImageViewerJS can work as a slave viewer of another Vintasoft.Imaging.Html5.WebImageViewerJS or Vintasoft.Imaging.Html5.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:
    <script type="text/javascript">
        // 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.Html5.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);
    </script>
            
    


    Preview of images

    Preview mode

    Vintasoft.Imaging.Html5.WebImageViewerJS can preview image in different modes:
    Preview mode can be changed via Vintasoft.Imaging.Html5.WebImageViewerJS.set_ImageSizeMode function.

    Rotation of image

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

    Caching images on the server

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


    Visual tools

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

    The active visual tool of the Vintasoft.Imaging.Html5.WebImageViewerJS can be set via Vintasoft.Imaging.Html5.WebImageViewerJS.set_VisualTool function.

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