View images in web browser with SVG support
In This Topic
1. JavaScript UI control for image viewing in web browser with SVG support
The
Vintasoft.Imaging.UI.WebImageViewerJS class is a JavaScript control for viewing images 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 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), HTTP handler or any other .NET compatible web service.
Tutorial, which describes how to embed the SVG image viewer into an ASP.NET application can be found here:
Vintasoft.Imaging.UI.WebImageViewerJS can work separately and in this case:
Vintasoft.Imaging.UI.WebImageViewerJS can work as a slave viewer of other
Vintasoft.Imaging.UI.WebImageViewerJS or
Vintasoft.Imaging.UI.WebThumbnailViewerJS, and in this case:
Here is an example that demonstrates how to load images to a SVG 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
Vintasoft.Imaging.UI.WebImageViewerJS can display one or several images simulateously.
The
Vintasoft.Imaging.UI.WebImageViewerJS.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
Vintasoft.Imaging.UI.WebImageViewerJS allows to define the custom image display mode using the following functions:
1.1.2. Image preview modes
Vintasoft.Imaging.UI.WebImageViewerJS can preview image in different modes.
The
Vintasoft.Imaging.UI.WebImageViewerJS.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 appearance
Vintasoft.Imaging.UI.WebImageViewerJS allows to specify the appearance (background brush, background color, border color, border width, border style) for focused image using the
Vintasoft.Imaging.UI.WebImageViewerJS.set_FocusedImageAppearance function and for not focused images using the
Vintasoft.Imaging.UI.WebImageViewerJS.set_ImageAppearance function.
1.1.4. Rendering settings
Vector images/documents, for example PDF documents, must be rendered before preview in the
Vintasoft.Imaging.UI.WebImageViewerJS.
Rendering settings for vector images/documents can be set with the
Vintasoft.Imaging.UI.WebImageViewerJS.set_RenderingSettings function.
1.1.5. Rotation of image
The
Vintasoft.Imaging.UI.WebImageViewerJS.set_ImageRotationAngle function allows to set an orthogonal rotation angle of image in the image viewer.
1.1.6. Caching images on the server
The
Vintasoft.Imaging.UI.WebImageViewerJS.set_UseCache function allows to specify whether caching of the image tiles on server is necessary.
1.2. Context menu of image viewer
Vintasoft.Imaging.UI.WebImageViewerJS.get_ContextMenuFunc allows to get the handler for "contextmenu" event of the viewer.
Vintasoft.Imaging.UI.WebImageViewerJS.set_ContextMenuFunc allows to set the handler for "contextmenu" event of the viewer.
1.3. Visual tools
The visual tools complement functionality of
Vintasoft.Imaging.UI.WebImageViewerJS class and allow to process images visually.
The active visual tool of the
Vintasoft.Imaging.UI.WebImageViewerJS can be set using
Vintasoft.Imaging.UI.WebImageViewerJS.set_VisualTool function.
More detailed information about visual tools can be found here:
"Visual tools for SVG image viewer."
2. Web Document Viewer UI for image viewing in web browser with SVG support
Web Document Viewer UI always has image/annotation viewer.
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 HTML5 image 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 image 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 annotation 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 annotation 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.
Here is screenshot of image viewer panel in web application: