VintaSoft Imaging .NET SDK v8.7
In This Topic
    SVG thumbnail viewer
    In This Topic

    The Vintasoft.Imaging.Svg.WebThumbnailViewerJS class is a JavaScript control for viewing thumbnails in any SVG 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 HTTP handler, WCF service, Web API controller (ASP.NET MVC 4) or Web API 2 controller (ASP.NET MVC 5).

    A step-by-step guide how to embed the SVG thumbnail viewer into an ASP.NET WebForms application can be found here:
    "How to add web image and thumbnail viewers to a page of ASP.NET WebForms application?"

    Vintasoft.Imaging.Svg.WebThumbnailViewerJS can work separately and in this case:

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

    Appearance of thumbnails

    Size of thumbnails

    Thumbnails have two sizes:
    The physical size of thumbnails can be set via Vintasoft.Imaging.Svg.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.Svg.WebThumbnailViewerJS.set_ThumbnailScale function. The visible size is calculated as multiplication of physical size and scaling factor. Here is a list of scaling factors:

    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:
    <script type="text/javascript">
        var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");

    Adding text to thumbnail

    The Vintasoft.Imaging.Svg.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:
    <script type="text/javascript">
        // get a thumbnail canvas
        var canvas = thumbnailViewer1.get_ThumbnailCanvas(0);
        // draw a text on the thumbnail canvas
        canvas.text(canvas.width / 2, canvas.height - 10, '# 1').attr({
            "font-family": "Arial",
            "font-size": 14

    Manipulation of thumbnails

    Rendering of thumbnails

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


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

    Rotation of thumbnails

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

    Caching thumbnails on the server

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