Render images in background

In This Topic

Web image viewer starts image rendering when image is focused in image viewer.

Sometimes is necessary to render tiles of not focused images in background for fast image navigation. This article explains how to render tiles of not focused images in background.

1. Manage image viewer cache using viewer settings on client-side

WebImageViewerJS class has settings, which define how viewer works with image cache.
Here is an example that shows how to manage image cache using image viewer settings:

JavaScript

// create image viewer
var imageViewer1 = new Vintasoft.Imaging.UI.WebImageViewerJS("imageViewerPanel");

// set a value indicating whether rendered image tiles must be saved in cache on server (by default this property is set to true)
imageViewer1.set_UseCache(true);

// get current cache manager of image viewer
var cacheManager = imageViewer1.get_ImageCacheManager();
// OR
// create cache manager
//var cacheManager = new Vintasoft.Imaging.Utils.WebImageCacheManagerJS();
// set the image cache manager of image viewer
//imageViewer1.set_ImageCacheManager(cacheManager);

// specify that cache size is not limited
cacheManager.set_MaxCacheSize(0);

// specify that image viewer must not synchronize the image cache manager and images
// when image collection is changed. By default this property is set to true.
// When you remove image from image collection, all cache associated with removed image also will be removed.
imageViewer1.set_SyncCacheWithImages(false);

2. Render images, which are loaded in viewer, in background on client-side

WebImageViewerJS class has the "renderImages" method that allows to send a request for asynchronous rendering of tiles of specified images.
Here is an example that shows how to use WebImageViewerJS.renderImages method:

JavaScript

// array of indexes of images in image viewer (all images in viewer will be rendered if array is empty)
var imageIndexes = [0, 2];

// send a request for asynchronous rendering of tiles of the specified images
imageViewer1.renderImages(imageIndexes);

3. Render images, which are NOT loaded in viewer, in background on client-side

Vintasoft.Shared.WebImageJS class has the "renderTiles" method that allows to send a reques for asynchronous rendering of tiles of specified image.
Here is an example that shows how to render image tiles before adding images to a viewer and add images to the viewer when tiles rendering was finished:

JavaScript

// create image source for existing multipage image file
var imageSource = new Vintasoft.Shared.WebImageSourceJS("<Image ID>");

// create images for first and second pages
var image0 = new Vintasoft.Shared.WebImageJS(imageSource, 0);
var image1 = new Vintasoft.Shared.WebImageJS(imageSource, 1);

// get the image tile size in image viewer
var tileSize = imageViewer1.get_TileSize();
// get a format in which the viewer want to receive image tiles
var tilesFormat = imageViewer1.get_TilesFormat();
// define scale (horizontal and vertical) of image tile
var scale = { x: 1, y: 1 };

// count of rendered image tiles
var renderTilesCount = 0;



/**
 Function that will be executed if request is executed successfully
*/
function __renderTiles_success(data) {
    // increase counter
    renderTilesCount++;
    // if all images are rendered
    if (renderTilesCount === 2) {
        // get image collection of viewer
        var images = imageViewer1.get_Images();
        // add new images to the viewer
        images.addRange([image0, image1]);
    }
}

/**
 Function that will be executed if request is failed.
*/
function __renderTiles_fail(data) {
    // show information about error
}

// settings for rendering of image tiles
var tileRenderingSettings = {
    width: tileSize.width,
    height: tileSize.height,
    scale: scale,
    format: tilesFormat
};
// render all tiles of first image
image0.renderTiles(tileRenderingSettings, __renderTiles_success, __renderTiles_fail);
// render all tiles of second image
image1.renderTiles(tileRenderingSettings, __renderTiles_success, __renderTiles_fail);

Previous example shows how to render image tiles without zoom. Here is an example that shows how to calculate image scale that depends from size mode in image viewer:

JavaScript

/**
 Calculates scale in image viewer for specified image.
*/
function __calculateScale(viewer, image) {
    // get image size mode
    var imageSizeMode = viewer.get_ImageSizeMode();
    // default scale
    var scale = { x: 1, y: 1 };
    switch (imageSizeMode.toString()) {
        case "PixelToPixel":
            scale = __getScaleForPixelToPixelMode(viewer, image);
            break;

        case "Normal":
            scale = __getScaleForNormalMode(viewer, image);
            break;

        case "Zoom":
            scale = __getScaleForZoomMode(viewer, image);
            break;

        case "BestFit":
            if (!viewer.get_IsMultipageDisplayMode()) {
                scale = __getScaleForBestFitMode_SinglePage();
            }
            else {
                // not implemented because algorithm is complex in general case,
                // see __getScaleForFitToWidthMode_3ImagesInSingleRow function
            }
            break;

        case "FitToWidth":
        case "FitToHeight":
            // not implemented because algorithm is complex in general case,
            // see __getScaleForFitToWidthMode_3ImagesInSingleRow function
            break;
    }
    return scale;
}

/**
 Calculates scale for PixelToPixel image size mode for specified image.
*/
function __getScaleForPixelToPixelMode(viewer, image) {
    return { x: 1, y: 1 };
}

/**
 Calculates scale for Normal image size mode for specified image.
*/
function __getScaleForNormalMode(viewer, image) {
    // get screen resolution
    var screenResolution = Vintasoft.Shared.WebImagingEnviromentJS.getScreenDpi();

    // IMPORTANT: before getting image resolution you need to call the "getImageInfo" method and get image information,
    // otherwise the "get_Resolution" method will return null
    var imageResolution = image.get_Resolution();

    var resX = screenResolution.dpiX / imageResolution.x;
    var resY = screenResolution.dpiY / imageResolution.y;

    return { x: resX, y: resY };
}

/**
 Calculates scale for Zoom image size mode for specified image.
*/
function __getScaleForZoomMode(viewer, image) {
    // scale for Normal mode equals scale for Zoom mode when zoom == 100
    var normalScale = __getScaleForNormalMode(viewer, image);
    var dZoom = viewer.get_Zoom() / 100;
    return {
        x: normalScale.x * dZoom,
        y: normalScale.y * dZoom
    };
}

/**
 Calculates scale for BestFit image size mode for specified image if image viewer is working in single page display mode.
*/
function __getScaleForBestFitMode_SinglePage(viewer, image) {
    // get screen resolution
    var screenResolution = Vintasoft.Shared.WebImagingEnviromentJS.getScreenDpi();

    // IMPORTANT: before getting image resolution you need to call the "getImageInfo" method and get image information,
    // otherwise the "get_Resolution" method will return null
    var imageResolution = image.get_Resolution();

    // IMPORTANT: before getting image size you need to call the "getImageInfo" method and get image information,
    // otherwise the "get_Size" method will return null

    // get image size
    var imageSize = image.get_Size();
    var imageWidth = imageSize.width;
    var imageHeight = imageSize.height;

    // image viewer size
    var viewerWidth = 1670;
    var viewerHeight = 779;

    var resX = screenResolution.dpiX / imageResolution.x;
    var resY = screenResolution.dpiY / imageResolution.y;

    // image width and height in DIP (device independent pixels)
    var imageWidthInDip = imageWidth * resX;
    var imageHeightInDip = imageHeight * resY;

    var zoom = Math.min(viewerWidth / imageWidthInDip, viewerHeight / imageHeightInDip);

    return { x: zoom * resX, y: zoom * resY };
}

/**
 Calculates scale for FitToWidth mode for specified image if image viewer shows only three images in one row without rotation and
 all images have same size and resolution.
*/
function __getScaleForFitToWidthMode_3ImagesInSingleRow(viewer, image) {

    // get screen resolution
    var screenResolution = Vintasoft.Shared.WebImagingEnviromentJS.getScreenDpi();

    // IMPORTANT: before getting image resolution you need to call the "getImageInfo" method and get image information,
    // otherwise the "get_Resolution" method will return null
    var imageResolution = image.get_Resolution();

    var resX = screenResolution.dpiX / imageResolution.x;
    var resY = screenResolution.dpiY / imageResolution.y;

    // IMPORTANT: before getting image size you need to call the "getImageInfo" method and get image information,
    // otherwise the "get_Size" method will return null

    // get image size
    var imageSize = image.get_Size();
    var imageWidth = imageSize.width;
    var imageHeight = imageSize.height;

    // image count in one row
    var imageCountInOneRow = 3;

    // image viewer size
    var viewerWidth = 1670;
    var viewerHeight = 779;

    // image width and height in DIP (device independent pixels)
    var imageWidthInDip = imageWidth * resX;
    var imageHeightInDip = imageHeight * resY;

    // get the image padding in multipage display mode
    var padding = viewer.get_MultipageDisplayImagePadding();
    // get sum of left and right paddings
    var horizPadding = padding[0] + padding[2];
    // get sum of top and bottom paddings
    var vertPadding = padding[1] + padding[3];

    // sum of images width
    var allImagesWidth = imageWidthInDip * imageCountInOneRow;

    // find scale
    var zoom = (viewerWidth - horizPadding * imageCountInOneRow) / allImagesWidth;

    // height with scale
    var scaledHeight = Math.round(imageHeightInDip * zoom + vertPadding);

    // if height more than viewer height, i.e. vertical scroll exists
    if (scaledHeight > viewerHeight) {
        // get scroll size
        var scrollSize = Vintasoft.Shared.WebImagingEnviromentJS.get_ScrollSize();
        // remove scroll from width of viewer
        viewerWidth -= scrollSize;
        // find scale
        zoom = (viewerWidth - horizPadding * imageCountInOneRow) / allImagesWidth;
    }

    // total scale
    return { x: zoom * resX, y: zoom * resY };
}

4. Render images in background on server-side

You can render image tiles on server-side.

Here is an example how to render image tiles on server-side:

/// <summary>
/// Renders image tiles.
/// </summary>
/// <param name="sessionId">Session ID.</param>
public void RenderImageTiles(string sessionId)
{
    // create a controller that is used in you application for rendering images
    MyVintasoftImageApiController imageApiController = new MyVintasoftImageApiController();

    // create information about image, which must be rendered
    Vintasoft.Shared.Web.WebImageInfo imageInfo = new Vintasoft.Shared.Web.WebImageInfo("VintasoftImagingDemo.pdf", 0);

    // create request object
    RenderTilesRequestParams request = new RenderTilesRequestParams();
    // set info about image
    request.imageInfo = imageInfo;
    // set info about tile size
    request.tileSize = new Vintasoft.Shared.Web.WebSize(1024, 1024);
    // set info about scale
    request.scale = new Vintasoft.Shared.Web.WebPointF(1, 1);
    // set info about session ID
    request.sessionId = sessionId;

    // render image tiles
    imageApiController.RenderImageTiles(request);
}

Send Feedback