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
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]);
</script>
Appearance of thumbnails
Size of thumbnails
Thumbnails have two sizes:
- physical size - the size of bitmap associated with thumbnail
- visible size - the size of bitmap associated with thumbnail after scaling
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:
- Smallest - the visible size is 0.5 of the physical size
- Small - the visible size is 0.75 of the physical size
- Normal - the visible size equals the physical size
- Large - the visible size is 1.5 of the physical size
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");
thumbnailViewer1.set_NormalThumbnailAppearance(appearance);
</script>
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
});
</script>
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.
Multiselection
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.