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

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

    The Vintasoft.Imaging.UI.WebThumbnailViewerJS class is a JavaScript control for viewing thumbnails in any HML5 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 a thumbnail. 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.

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

    Vintasoft.Imaging.UI.WebThumbnailViewerJS can work separately and in this case:
    Vintasoft.Imaging.UI.WebThumbnailViewerJS can work as a slave viewer of another Vintasoft.Imaging.UI.WebThumbnailViewerJS or Vintasoft.Imaging.UI.WebImageViewerJS, and in this case:
    Here is an example that demonstrates how to add images to HTML5 image viewer, add link between HTML5 image viewer and HTML5 thumbnail viewer:
    // 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");
    // create a thumbnail viewer
    var thumbnailViewer1 = new Vintasoft.Imaging.Html5.WebThumbnailViewerJS("WebThumbnailViewer1");
    // create a link between image viewer and thumbnail viewer
    thumbnailViewer1.set_MasterViewer(imageViewer1);
    // get an image collection of image viewer
    var images = imageViewer1.get_Images();
    // add images to the image collection
    images.addRange([image1, image2]);
                                
    


    1.1. Appearance of thumbnails

    1.1.1. Size of thumbnails

    Thumbnails have two sizes:
    The physical size of thumbnails can be set via Vintasoft.Imaging.UI.WebThumbnailViewerJS.set_ThumbnailSize function. The minimal physical size of thumbnail is 32x32 pixels, the maximal physical size of thumbnail is 1024x1024 pixels.

    The visible size of thumbnails can be set via Vintasoft.Imaging.UI.WebThumbnailViewerJS.set_ThumbnailScale function. The visible size is calculated as multiplication of physical size and scaling factor. Here is a list of scaling factors:

    1.1.2. Custom appearance of thumbnails

    The Vintasoft.Imaging.WebThumbnailAppearanceJS class allows to define a visual appearance of thumbnail:

    Each appearance allows to specify back color, background style and border style of thumbnail.

    Here is an example that demonstrates how to create thumbnail appearance and set it as "normal" style in an SVG thumbnail viewer:
    var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");
    thumbnailViewer1.set_NormalThumbnailAppearance(appearance);
                                
    

    1.1.3. Adding text to thumbnail

    The Vintasoft.Imaging.UI.WebThumbnailViewerJS.get_ThumbnailCanvas function allows to get a canvas, where thumbnail is drawn. Canvas can be used for drawing additional information (for example, text) on a thumbnail.

    Here is an example that demonstrates how to add a text with index of thumbnail under the image of thumbnail:
    // get the thumbnail canvas
    var canvas = thumbnailViewer1.get_ThumbnailCanvas(0);
    
    // draw a text on the thumbnail canvas
    
    var width = canvas.width;
    var height = canvas.height;
    var canvasContext = canvas.getContext("2d");
    canvasContext.font = "12px Arial";
    canvasContext.textAlign = "center";
    canvasContext.fillText("# 1", width / 2, height - 3);
                                
    


    1.2. Manipulation of thumbnails

    1.2.1. Rendering of thumbnails

    Vintasoft.Imaging.UI.WebThumbnailViewerJS renders thumbnails and generates:
    By default are generated all thumbnails. The Vintasoft.Imaging.UI.WebThumbnailViewerJS.set_GenerateOnlyVisibleThumbnails function allows to specify whether only visible thumbnails must be generated.

    1.2.2. Multiselection

    Vintasoft.Imaging.UI.WebThumbnailViewerJS allows to choose several thumbnails at the same time. The indices of selected thumbnails can be received using the Vintasoft.Imaging.UI.WebThumbnailViewerJS.get_SelectedIndices function. The indices of selected thumbnails can be specified using the Vintasoft.Imaging.UI.WebThumbnailViewerJS.set_SelectedIndices function.


    1.2.3. Rotation of thumbnails

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


    1.2.4. Caching thumbnails on the server

    The Vintasoft.Imaging.UI.WebThumbnailViewerJS.set_UseCache function allows to specify whether caching of the thumbnails in files on server is necessary.



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

    The WebUiThumbnailViewerPanelJS class represents a web UI panel that can be used in web document viewer and allows to display a thumbnail viewer. Panel can be shown in side panel or separately.
    Panel will create HTML5 thumbnail 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 thumbnail 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 annotated thumbnail 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 annotated thumbnail 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.

    The WebThumbnailViewerSettingsDialogJS class represents a JavaScript UI dialog that can be used in web document viewer and allows to view and edit the thumbnail viewer settings.
    The WebThumbnailViewerSettingsJqueryDialogJS class represents a jQuery UI dialog that can be used in web document viewer and allows to view and change the thumbnail viewer settings.

    Here is screenshot of thumbnail viewer panel in web application: