View thumbnails in HTML5 web browser

In This Topic

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

The 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 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 web thumbnail viewer into an ASP.NET application can be found here:

WebThumbnailViewerJS can work separately and in this case:

WebThumbnailViewerJS creates its own image collection
the associated image collection can be accessed via get_Images function
the image collection can be navigated via get_FocusedIndex and set_FocusedIndex functions
image will be added to the image viewer if the image is added to the associated image collection; image will be removed from image viewer if the image is removed from the associated image collection

WebThumbnailViewerJS can work as a slave viewer of another WebThumbnailViewerJS or WebImageViewerJS, and in this case:

the link between viewers can be set via set_MasterViewer function of the slave viewer
the slave viewer uses image collection of the master viewer
the shared image collection can be accessed via get_Images function of the master or slave viewer
the image collection can be navigated via get_FocusedIndex and set_FocusedIndex functions of the master or slave viewer
the focused index in master and slave viewers is changed synchronously
image will be added to the image viewer if the image is added to the associated image collection; image will be removed from image viewer if the image is removed from the associated image collection

Here is an example that demonstrates how to add images to the web image viewer, add link between web image viewer and web thumbnail viewer:

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.UI.WebImageViewerJS("WebImageViewer1");
// create a thumbnail viewer
var thumbnailViewer1 = new Vintasoft.Imaging.UI.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:

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

1.1.2. Custom appearance of thumbnails

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

set_NormalThumbnailAppearance - set "normal" style of thumbnail
set_FocusedThumbnailAppearance - set "focused" style of thumbnail
set_HoveredThumbnailAppearance - set "hovered" style of thumbnail
set_NotReadyThumbnailAppearance - set "not ready" style 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 web thumbnail viewer:

JavaScript

var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");
thumbnailViewer1.set_NormalThumbnailAppearance(appearance);

1.1.3. Adding text to thumbnail

The getThumbnailCanvas 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:

JavaScript

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

WebThumbnailViewerJS renders thumbnails and generates:

thumbnailRendered event when thumbnail is rendered
imageRenderingException event when thumbnail rendering failed
thumbnailPainting event when thumbnail is being painted
thumbnailPainted event when thumbnail is painted
visibleThumbnailsPainted event when all visible thumbnails are painted

By default are generated all thumbnails. The set_GenerateOnlyVisibleThumbnails function allows to specify whether only visible thumbnails must be generated.

1.2.2. Multiselection

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

1.2.3. Rotation of thumbnails

The set_ViewRotationAngle function allows to set an orthogonal rotation angle of thumbnail in the thumbnail viewer.

1.2.4. Caching thumbnails on the server

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

If caching is enabled, the web thumbnail viewer will do the following steps:

If thumbnail is found in cache, viewer will:
- Load thumbnail from the cache
- Display the thumbnail
If thumbnail is not found in cache, viewer will:
- Render thumbnail
- Save thumbnail to the cache
- Display the thumbnail

If caching is not enabled, the web thumbnail viewer will render thumbnail for each new request.

The thumbnail can be stored in cache as PNG image (WebImageTypeEnumJS.Url) or as a Base64 string (WebImageTypeEnumJS.Base64). By default the web thumbnail viewer stores thumbnails in cache as PNG images. Used format can be get using WebThumbnailViewerJS.get_ThumbnailsFormat function. Used format can be set using WebThumbnailViewerJS.set_ThumbnailsFormat function.

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

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 web thumbnail viewer if "annotations" flag is NOT enabled in web document viewer settings.
Panel will create web annotated thumbnail viewer if "annotations" flag is enabled in web document viewer settings.

The WebThumbnailViewerSettingsDialogJS class represents an UI dialog that can be used in web document viewer and allows to view and edit the thumbnail viewer settings.

Here is screenshot of thumbnail viewer panel in web application:

Send Feedback