VintaSoft Imaging .NET SDK 12.5: Документация для Веб разработчика
В этом разделе
    Рендеринг изображений в фоновом режиме
    В этом разделе
    Веб просмотрщик изображений начинает рендеринг изображения, когда оно становится активным в веб просмотрщике изображений. Для быстрой навигации по изображениям иногда требуется отрисовывать тайлы неактивных изображений в фоновом режиме. Эта статья объясняет, как отрендерить тайлы неактивных изображений в фоновом режиме.



    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);
    }