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

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

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

    Инструкции по внедрению веб просмотрщика изображений в приложение ASP.NET можно найти здесь:
    WebImageViewerJS может работать независимо, и в этом случае: WebImageViewerJS может работать как подчинённый веб просмотрщик другого веб просмотрщика WebImageViewerJS или WebThumbnailViewerJS, и в этом случае: Вот 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");
// get an image collection of image viewer
var images = imageViewer1.get_Images();
// add images to the image collection
images.addRange([image1, image2]);
// set focus to the last image in image collection
imageViewer1.set_FocusedIndex(images.get_Count() - 1);


    1.1. Предварительный просмотр изображений.

    1.1.1. Режим отображения изображений в веб просмотрщике изображений.

    UI-контрол WebImageViewerJS может одновременно отображать одно или несколько изображений.

    Функция set_DisplayMode позволяет установить один из предопределённых режимов отображения:
    WebImageViewerJS также позволяет определить пользовательский режим отображения изображения с помощью следующих функций:

    1.1.2. Режимы масштабирования изображений в веб просмотрщике изображений.

    WebImageViewerJS позволяет масштабировать изображения в различных режимах.

    Функция set_ImageSizeMode позволяет установить один из предопределённых режимов масштабирования изображений:

    1.1.3. Режимы рендеринга изображений в веб просмотрщике изображений.

    WebImageViewerJS может работать в режиме рендеринга растровых и векторных изображений.
    Режим рендеринга растровых изображений означает, что веб просмотрщик рендерит изображение (JPEG, PNG, TIF и др.) или документ (PDF, DOCX, DOC, XLSX) в виде набора растровых тайлов изображения.
    Режим рендеринга векторных изображений означает, что веб просмотрщик рендерит документ (PDF, DOCX, DOC, XLSX) в виде векторного SVG-изображения.

    Функция get_UseVectorRendering позволяет получить значение, указывающее, должен ли веб просмотрщик изображений использовать векторный рендеринг для векторных документов.
    Функция set_UseVectorRendering позволяет установить значение, указывающее, должен ли веб просмотрщик изображений использовать векторный рендеинг для векторных документов.

    При использовании режима рендеринга растровых изображений:
    При использовании режима рендеринга векторных изображений:

    1.1.4. Внешний вид изображения в веб просмотрщике изображений.

    WebImageViewerJS позволяет задать внешний вид (кисть фона, цвет фона, цвет границы, ширина границы, стиль границы) для выделенного изображения с помощью функции set_FocusedImageAppearance и для не выделенных изображений с помощью функции set_ImageAppearance.


    1.1.5. Параметры рендеринга изображений в веб просмотрщике изображений.

    Векторные изображения/документы, например PDF документы, должны быть отрендерены перед просмотром в WebImageViewerJS.

    Параметры рендеринга для векторных изображений/документов можно задать с помощью функции set_RenderingSettings.


    1.1.6. Поворот изображения в веб просмотрщике изображений.

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


    1.1.7. Кэширование изображений на сервере.

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

    Если веб просмотрщик использует кэш:
    1. Web API отрендерит тайл изображения на стороне сервера и сохранит его на сервере в папке "\VintasoftCache\\Tiles\".
    2. Web API отправит веб просмотрщику URL-адрес отрендеренного тайла изображения.
    3. Веб просмотрщик получит от Web API URL-адрес тайла изображения, веб-браузер скачает изображение по URL-адресу в кэш браузера и отобразит изображение пользователю.
    4. Отрендеренный тайл изображения будет храниться на компьютере клиента до тех пор, пока кэш браузера не будет очищен.
    5. Отрендеренный тайл изображения будет храниться на сервере до тех пор, пока кэш веб приложения (папка "\VintasoftCache\\Tiles\") не будет очищен.

    Если веб просмотрщик не использует кэш:
    1. Web API отрендерит тайл изображения на стороне сервера и отправит изображение в виде base64-строки в веб-браузер. Отрендеренное изображение НЕ будет сохранено на сервере.
    2. Веб просмотрщик получит отрендеренное изображение в виде base64-строки с сервера, веб-браузер отобразит изображение пользователю.
    3. Отрендеренное изображение будет уничтожено, когда пользователь закроет веб-браузер.

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


    1.2. Контекстное меню веб просмотрщика изображений.

    get_ContextMenuFunc позволяет получить обработчик события "contextmenu" веб просмотрщика.
    set_ContextMenuFunc позволяет установить обработчик события "contextmenu" веб просмотрщика.



    1.3. Визуальные инструменты.

    Визуальные инструменты дополняют функциональность класса WebImageViewerJS и позволяют визуально обрабатывать изображения.

    Активный визуальный инструмент WebImageViewerJS можно установить с помощью функции set_VisualTool.

    Более подробную информацию о визуальных инструментах можно найти здесь: "Визуальные инструменты для веб просмотрщика изображений."



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

    В пользовательском интерфейсе веб просмотрщика документов по умолчанию присутствует веб просмотрщик изображений.

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

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



     

     

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

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