VintaSoft Imaging .NET SDK 14.0: Документация для Веб разработчика
В этом разделе
    Просмотр миниатюр в HTML5 веб-браузере
    В этом разделе

    1. JavaScript UI-контрол для просмотра миниатюр в HTML5 веб-браузере.

    Класс WebThumbnailViewerJS - это JavaScript UI-контрол для просмотра миниатюр в любом HML5 веб-браузере. Класс может быть создан на стороне клиента веб-приложения. Для получения информации об изображении и рендаринга миниатюры классу требуется веб сервис. В качестве веб сервиса может использоваться ASP.NET Core Web API контроллер, ASP.NET Веб API 2 контроллер или любой другой веб сервис совместимый с .NET.

    Инструкции по внедрению веб просмотрщика миниатюр в ASP.NET приложение можно найти здесь:
    WebThumbnailViewerJS может работать независимо, и в этом случае: WebThumbnailViewerJS может работать как подчинённый просмотрщик другого просмотрщика WebThumbnailViewerJS или WebImageViewerJS, и в этом случае: Вот JavaScript код, который демонстрирует, как добавить изображения в веб просмотрщик изображений и установить связь между веб просмотрщиком изображений и веб просмотрщиком миниатюр: 
    // 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");
// create a thumbnail viewer
var thumbnailViewer1 = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1");
// create a link between image viewer and thumbnail viewer
thumbnailViewer1.set_MasterViewer(imageViewer1);
// get an image collection of image viewer
var images = imageViewer1.get_Images();
// add images to the image collection
images.addRange([image1, image2]);


    1.1. Внешний вид миниатюр.

    1.1.1. Размер миниатюр.

    Миниатюры имеют два размера: Фактический размер миниатюр можно установить с помощью функции WebThumbnailViewerJS.set_ThumbnailSize. Минимальный фактический размер миниатюры - 32x32 пикселя, максимальный - 1024x1024 пикселя.

    Видимый размер миниатюр можно установить с помощью функции WebThumbnailViewerJS.set_ThumbnailScale. Видимый размер рассчитывается как произведение фактического размера и коэффициента масштабирования. Вот список коэффициентов масштабирования:

    1.1.2. Пользовательский внешний вид для миниатюр.

    Класс WebThumbnailAppearanceJS позволяет определить внешний вид миниатюры:
    Для каждого стиля можно задать цвет фона, стиль фона и стиль границы миниатюры.

    Вот JavaScript код, который демонстрирует, как определить внешний вид миниатюры и установить его в качестве стиля миниатюры в в веб просмотрщике миниатюр: 
    var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");
thumbnailViewer1.set_NormalThumbnailAppearance(appearance);

    1.1.3. Добавление текста к миниатюре.

    Функция WebThumbnailViewerJS.getThumbnailCanvas позволяет получить холст, на котором отрисована миниатюра. Холст можно использовать для рисования дополнительной информации (например, текста) на миниатюре.

    Вот JavaScript код, который демонстрирует, как добавить текст с индексом миниатюры под изображением миниатюры: 
    // get the thumbnail canvas
var canvas = thumbnailViewer1.get_ThumbnailCanvas(0);

// draw a text on the thumbnail canvas

var width = canvas.width;
var height = canvas.height;
var canvasContext = canvas.getContext("2d");
canvasContext.font = "12px Arial";
canvasContext.textAlign = "center";
canvasContext.fillText("# 1", width / 2, height - 3);


    1.2. Работа с миниатюрами.

    1.2.1. Рендеринг миниатюр.

    WebThumbnailViewerJS рендерит миниатюры и генерирует события: По умолчанию рендерятся все миниатюры. Функция WebThumbnailViewerJS.set_GenerateOnlyVisibleThumbnails позволяет указать, нужно ли рендерить только видимые миниатюры.

    1.2.2. Множественный выбор.

    WebThumbnailViewerJS позволяет выбрать несколько миниатюр одновременно. Индексы выбранных миниатюр можно получить с помощью функции WebThumbnailViewerJS.get_SelectedIndices. Индексы выбранных миниатюр можно установить с помощью функции WebThumbnailViewerJS.set_SelectedIndices.


    1.2.3. Поворот миниатюр.

    Функция WebThumbnailViewerJS.set_ViewRotationAngle позволяет установить угол ортогонального поворота миниатюры в веб просмотрщике миниатюр.


    1.2.4. Кэширование миниатюр на сервере.

    Функция WebThumbnailViewerJS.set_UseCache позволяет указать, необходимо ли кэширование миниатюр в файлах на сервере.

    Если кэширование включено, веб просмотрщик миниатюр выполнит следующие действия:
    Если кэширование отключено, веб просмотрщик миниатюр рендерит миниатюру для каждого нового запроса.

    Миниатюра может быть сохранена в кэше как PNG-изображение (WebImageTypeEnumJS.Url) либо как base64-строка (WebImageTypeEnumJS.Base64). По умолчанию веб просмотрщик миниатюр сохраняет миниатюры в кэше как PNG-изображения. Используемый формат можно получить с помощью функции WebThumbnailViewerJS.get_ThumbnailsFormat. Используемый формат можно установить с помощью функции WebThumbnailViewerJS.set_ThumbnailsFormat.


    2. Пользовательский интерфейс веб просмотрщика документов для просмотра миниатюр в HTML5 веб-браузере.

    Класс WebUiThumbnailViewerPanelJS представляет собой UI-панель, которая может использоваться в веб просмотрщике документов и позволяет отображать веб просмотрщик миниатюр. Панель может быть расположена на боковой панели или отдельно.
    Панель создаст веб просмотрщик миниатюр, если флаг "annotations" отключен в настройках веб просмотрщика документов.
    Панель создаст веб просмотрщик миниатюр с аннотациями, если флаг "annotations" ВКЛЮЧЕН в настройках веб просмотрщика документов.

    Класс WebThumbnailViewerSettingsDialogJS представляет собой диалоговое окно, которое может использоваться в веб просмотрщике документов и позволяет просматривать и редактировать настройки веб просмотрщика миниатюр.

    Вот снимок экрана панели с просмотрщиком миниатюр в веб приложении:



     

     

    Копирайт © 2007-2024 ООО "ВинтаСофт". Все права защищены.

    Отправить отзыв