Рендеринг изображений в фоновом режиме
В этом разделе
Веб просмотрщик изображений начинает рендеринг изображения, когда оно становится активным в веб просмотрщике изображений. Для быстрой навигации по изображениям иногда требуется отрисовывать тайлы неактивных изображений в фоновом режиме. Эта статья объясняет, как отрендерить тайлы неактивных изображений в фоновом режиме.
1. Управление кэшем изображений с помощью настроек веб просмотрщика изображений на стороне клиента
Класс
WebImageViewerJS имеет настройки, которые определяют, как веб просмотрщик изображений работает с кэшем изображений.
Вот 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. Рендеринг загруженных в веб просмотрщик изображений в фоновом режиме на стороне клиента
Класс
WebImageViewerJS имеет функцию "renderImages", которая позволяет отправить асинхронный запрос на рендеринг тайлов указанных изображений.
Вот JavaScript код, который демонстрирует как использовать функцию WebImageViewerJS.renderImages:
// 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. Рендеринг НЕ загруженных в веб просмотрщик изображений в фоновом режиме на стороне клиента
Класс
WebImageJS имеет функцию "renderTiles", которая позволяет отправить асинхронный запрос на рендеринг тайлов указанного изображения.
Вот 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);
Предыдущий пример показывает, как отрендерить тайлы изображения без масштабирования.
Вот 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. Рендеринг изображений в фоновом режиме на сервере
Вы можете отрендерить тайлы изображений на сервере.
Вот JavaScript-код, который демонстрирует, как отрендерить тайлы изображения на стороне сервера:
/// <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);
}