Просмотр миниатюр в HTML5 веб-браузере

В этом разделе

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

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

Инструкции по внедрению веб просмотрщика миниатюр в ASP.NET приложение можно найти здесь:

WebThumbnailViewerJS может работать независимо, и в этом случае:

WebThumbnailViewerJS создаёт собственную коллекцию изображений.
Доступ к связанной коллекции изображений можно получить с помощью функции WebThumbnailViewerJS.get_Images.
Навигация по коллекции изображений осуществляется с помощью функций WebThumbnailViewerJS.get_FocusedIndex и WebThumbnailViewerJS.set_FocusedIndex.
Изображение будет добавлено в веб просмотрщик изображений, если оно добавлено в связанную коллекцию изображений; изображение будет удалено из веб просмотрщика изображений, если оно удалено из связанной коллекции изображений.

WebThumbnailViewerJS может работать как подчинённый просмотрщик другого просмотрщика WebThumbnailViewerJS или WebImageViewerJS, и в этом случае:

Связь между веб просмотрщиками устанавливается с помощью функции WebThumbnailViewerJS.set_MasterViewer подчинённого веб просмотрщика.
Подчинённый веб просмотрщик использует коллекцию изображений главного веб просмотрщика.
Доступ к общей коллекции изображений можно получить с помощью функции WebThumbnailViewerJS.get_Images главного или подчинённого веб просмотрщика.
Навигация по коллекции изображений осуществляется с помощью функций WebThumbnailViewerJS.get_FocusedIndex и WebThumbnailViewerJS.set_FocusedIndex главного или подчинённого веб просмотрщика.
Индекс фокуса в главном и подчинённом веб просмотрщиках изменяется синхронно.
Изображение будет добавлено в веб просмотрщик изображений, если оно добавлено в связанную коллекцию изображений; изображение будет удалено из веб просмотрщика изображений, если оно удалено из связанной коллекции изображений.

Вот JavaScript код, который демонстрирует, как добавить изображения в веб просмотрщик изображений и установить связь между веб просмотрщиком изображений и веб просмотрщиком миниатюр:

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. Видимый размер рассчитывается как произведение фактического размера и коэффициента масштабирования. Вот список коэффициентов масштабирования:

Smallest - видимый размер составляет 0.5 от фактического размера.
Small - видимый размер составляет 0.75 от фактического размера.
Normal - видимый размер равен фактическому размеру.
Large - видимый размер составляет 1.5 от фактического размера.

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

Класс WebThumbnailAppearanceJS позволяет определить внешний вид миниатюры:

WebThumbnailViewerJS.set_NormalThumbnailAppearance - установить стиль миниатюры.
WebThumbnailViewerJS.set_FocusedThumbnailAppearance - установить стиль сфокусированной миниатюры.
WebThumbnailViewerJS.set_HoveredThumbnailAppearance - установить стиль миниатюры, которая находится под курсором мыши.
WebThumbnailViewerJS.set_NotReadyThumbnailAppearance - установить стиль миниатюры для которой еще не отрендерилось изображение.

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

Вот JavaScript код, который демонстрирует, как определить внешний вид миниатюры и установить его в качестве стиля миниатюры в в веб просмотрщике миниатюр:

JavaScript

var appearance = new Vintasoft.Imaging.WebThumbnailAppearance("red", "3px solid green");
thumbnailViewer1.set_NormalThumbnailAppearance(appearance);

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

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

Вот JavaScript код, который демонстрирует, как добавить текст с индексом миниатюры под изображением миниатюры:

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.thumbnailRendered - событие, возникает после рендеринга миниатюры
WebThumbnailViewerJS.imageRenderingException - событие, возникает при сбое рендеринга миниатюры
WebThumbnailViewerJS.thumbnailPainting - событие, возникает во время рендеринга миниатюры
WebThumbnailViewerJS.thumbnailPainted - событие, возникает после рендеринга миниатюры
WebThumbnailViewerJS.visibleThumbnailsPainted - событие, возникает после рендеринга всех видимых миниатюр.

По умолчанию рендерятся все миниатюры. Функция 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 представляет собой диалоговое окно, которое может использоваться в веб просмотрщике документов и позволяет просматривать и редактировать настройки веб просмотрщика миниатюр.

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

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