View images in HTML5 web browser
In This Topic
1. JavaScript UI control for image viewing in HTML5 web browser
The
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 ASP.NET Core Web API controller (ASP.NET Core), ASP.NET Web API 2 controller (ASP.NET MVC 5),
ASP.NET HTTP Handler or any other .NET compatible web service.
Tutorials, which describe how to embed the web image viewer into an ASP.NET application can be found here:
WebImageViewerJS can work separately and in this case:
- WebImageViewerJS creates its own image collection
- associated image collection can be accessed via get_Images function
- 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
WebImageViewerJS can work as a slave viewer of another
WebImageViewerJS or
WebThumbnailViewerJS, and in this case:
- the link between viewers can be set via set_MasterViewer function of the slave viewer
- the slave viewer uses the image collection of the master viewer
- the shared image collection can be accessed via get_Images function of master or slave viewer
- the image collection can be navigated via get_FocusedIndex and set_FocusedIndex functions of 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 load images to a web image viewer and select the last image for displaying:
// 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");
// 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);
1.1. Preview of images
1.1.1. Image viewer display mode
WebImageViewerJS can display one or several images simulateously.
The
set_DisplayMode function allows to set one of the predefined display modes:
-
Single page - the image viewer simultaneously displays 1 image.
-
Single continuous column - the image viewer simultaneously displays all images in 1 continuous column.
-
Single continuous row - the image viewer simultaneously displays all images in 1 continuous row.
-
Two columns - the image viewer simultaneously displays 2 images in 2 columns.
-
Two rows - the image viewer simultaneously displays 2 images in 2 rows.
-
Two continuous columns - the image viewer simultaneously displays all images in 2 continuous columns.
-
Two continuous rows - the image viewer simultaneously displays all images in 2 continuous rows.
-
Three columns - the image viewer simultaneously displays 3 images in 3 columns.
-
Three rows - the image viewer simultaneously displays 3 images in 3 rows.
-
Three continuous columns - the image viewer simultaneously displays all images in 3 continuous columns.
-
Three continuous rows - the image viewer simultaneously displays all images in 3 continuous rows.
Also
WebImageViewerJS allows to define the custom image display mode using the following functions:
1.1.2. Image preview modes
WebImageViewerJS can preview image in different modes.
The
set_ImageSizeMode function allows to set one of the predefined preview modes:
- Normal - previews image using the image resolution without scaling
- PixelToPixel - previews image using the screen resolution without scaling, the image resolution is ignored
- FitToWidth - scales the image to fit the width of control
- FitToHeight - scales the image to fit the height of control
- BestFit - scales the image proportion to the control
- Zoom - zooms the image to the specified value
1.1.3. Image rendering modes
WebImageViewerJS can work in raster and vector image rendeing modes.
Raster image rendering mode means that viewer renders image (JPEG, PNG, TIF, etc) or document (PDF, DOCX, DOC, XLSX) as a set of image tiles.
Vector image rendering mode means that viewer renders document (PDF, DOCX, DOC, XLSX) as SVG content.
get_UseVectorRendering function allows to get a value indicating whether the image viewer must use vector rendering for vector documents.
set_UseVectorRendering function allows to set a value indicating whether the image viewer must use vector rendering for vector documents.
If raster image rendering mode is used:
- viewer checks if viewer rendered image tile with desired zoom previously
- if previously rendered image tiles are found, viewer displays image tiles
- if previously rendered image tiles are not found, viewer renders and displays image tiles
If vector image rendering mode is used:
- viewer renders document as SVG content only once
- viewer scales SVG content to the desired zoom and do not re-render document
1.1.4. Image appearance
WebImageViewerJS allows to specify the appearance (background brush, background color, border color,
border width, border style) for focused image using the
set_FocusedImageAppearance function and
for not focused images using the
set_ImageAppearance function.
1.1.5. Rendering settings
Vector images/documents, for example PDF documents, must be rendered before preview
in the
WebImageViewerJS.
Rendering settings for vector images/documents can be set with the
set_RenderingSettings function.
1.1.6. Rotation of image
The
set_ViewRotationAngle function allows to set an orthogonal rotation angle of image in the image viewer.
1.1.7. Caching images on the server
The
set_UseCache function allows to specify whether caching of the image tiles on server is necessary.
If web viewer uses cache:
- Web API will render image tile on server side and save image tile on server in folder "<WebApplicationPath>\VintasoftCache\<SessionId>\Tiles\".
- Web API will send URL to rendered image tile to the web viewer.
- Web viewer will receive URL to image tile from Web API, web browser will download image from URL into browser cache and display image to the user.
- Rendered image tile will be stored on client computer until browser cache will not be cleared.
- Rendered image tile will be stored on server until web application cache (folder "<WebApplicationPath>\VintasoftCache\<SessionId>\Tiles\") will not be cleared.
If web viewer does not use cache:
- Web API will render image tile on server side and send image as base64 string to the web browser. Rendered image will NOT be saved on server.
- Web viewer will receive rendered image as base64 string from server, web browser will display image to the user.
- Rendered image will be destroyed when user closed web browser.
Web application, which uses cache on server, uses image tile from cache if image tile was rendered earlier.
Web application, which does not use cache on server, always re-render image tile.
Web application, which uses cache, in most cases works faster than web application, which does not use cache.
1.2. Context menu of image viewer
get_ContextMenuFunc allows to get the handler for "contextmenu" event of the viewer.
set_ContextMenuFunc allows to set the handler for "contextmenu" event of the viewer.
1.3. Visual tools
The visual tools complement the functionality of
WebImageViewerJS class and allow to process images visually.
The active visual tool of the
WebImageViewerJS can be set using
set_VisualTool function.
More detailed information about visual tools can be found here:
"Visual tools for web image viewer."
2. Web Document Viewer UI for image viewing in HTML5 web browser
Web Document Viewer UI always has image/annotation viewer.
The
WebUiImageViewerPanelJS class represents a web UI panel that can be used in web document viewer and
allows to display an image viewer.
Panel will create web image viewer if "annotations" flag is NOT enabled in web document viewer settings.
Panel will create web annotation viewer if "annotations" flag is enabled in web document viewer settings.
Here is screenshot of image viewer panel in web application: