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

    1. JavaScript классы для обработки изображений в веб приложении

    Современные веб-приложения выполняют все ресурсоёмкие операции асинхронно, поэтому обработка изображений также должна выполняться асинхронно.

    Процесс обработки изображения в веб приложении можно разделить на следующие этапы:
    1. На стороне клиента: веб-приложение создает экземпляр JavaScript класса, который определяет команду обработки изображения и использует созданный экземпляр для отправки асинхронного запроса в веб-службе для обработки изображения.
    2. На стороне сервера: веб сервис получает запрос, обрабатывает изображение и отправляет результаты обработки изображения обратно JavaScript классу.
    3. На стороне клиента: JavaScript класс обрабатывает полученные результаты.

    1.1. Клиентская сторона веб-приложения

    Пространство имён Vintasoft.Imaging.ImageProcessing (определено в файле Vintasoft.Imaging.js) определяет следующие команды для обработки изображений:
    1. Abstract - базовые абстрактные команды:
    2. Base - команды, реализующие базовые манипуляции с изображением:
    3. Info - команды, предоставляющие информацию о изображении:
    4. Transforms - команды, выполняющие трансформацию изображения:
    5. Color - команды, реализующие манипулирование цветом изображения:
    6. Filters - команды, применяющие графические фильтры к изображению:
    7. Effects - команды, применяющие эффекты к изображению:
    8. FFT - команды, выполняющие обработку изображений в частотной области с использованием быстрого преобразования Фурье:

    Пространство имён Vintasoft.Imaging.ImageProcessing.DocCleanup (определено в файле Vintasoft.Imaging.DocCleanup.js) определяет следующие команды для обработки изображений документов:
    1. Document Cleanup - команды, позволяющие обрабатывать (очищать, восстанавливать текст, удалять линии и т.д.) изображение документа:
    2. Document Cleanup Info - команды, предоставляющие информацию о изображении документа:

    Команда, которая вносит изменения в изображение, позволяет указать способ его сохранения. Функция WebImageProcessingCommandWithSourceChangeJS.set_ChangeSource позволяет определить, будет ли изменённое изображение сохранено в исходный файл или в новый файл.


    Функция WebImageProcessingCommandBaseJS.execute отправляет асинхронный запрос на обработку изображения. В качестве параметров функция принимает:
    Важно: Для корректной работы файла Vintasoft.Imaging.js необходим файл Vintasoft.Shared.js.

    Вот JavaScript код, который демонстрирует как определить, является ли изображение чёрно-белым, и преобразовать изображение в чёрно-белое изображение, если надо. Для обработки изображения используется веб сервис по умолчанию.

    // create a web service for image processing
    var webService = new Vintasoft.Shared.WebServiceControllerJS("/api/Processing");
    // set the web service as the default web service for image processing
    Vintasoft.Shared.WebServiceJS.defaultImageProcessingService = webService;
    
            
    // isImageBlack command is executed successfully.
    function isImageBlack_success(answer) {
        // if image is black-white image
        if (answer.isImageBlackWhite)
                alert("Image is black-white.");
        // if image is NOT black-white image
        else {
            // create command for converting the image to a black-white image
            var convertCommand = new Vintasoft.Imaging.ImageProcessing.WebChangePixelFormatToBlackWhiteCommandJS();
            // execute the command
            convertCommand.execute(image, convert_success, error_callback);
        }
    }
    
    // Image is converted to a black-white image successfully.
    function convert_success(answer) {
        // get information about converted image
        var fileUrl = answer.imageInfo.fileInfo.id;
        var pageIndex = answer.imageInfo.pageIndex;
         // create new image source and image
        var source = new Vintasoft.Shared.WebImageSourceJS(fileUrl);
        var blackImage= new Vintasoft.Shared.WebImageJS(source, pageIndex);
        // set processed image as the first image in image viewer
        imageViewer1.get_Images().set(0, blackImage);
    }
    
    // Image processing command is failed.
    function error_callback(answer) {
        if (answer.errorMessage)
            alert(answer.errorMessage);
    }
    
    // create an image processing command
    var isImageBlackCommand = new Vintasoft.Imaging.ImageProcessing.WebIsImageBlackWhiteCommandJS();
    // get reference to the first image in image viewer
    var image = imageViewer1.get_Images().get_Image(0);
    // execute the command on image using the default web service
    isImageBlackCommand.execute(image, isImageBlack_success, error_callback);
    


    Вот JavaScript код, который демонстрирует как инвертировать изображение, хранящееся на сервере, и сохранить изменения в исходный файл. Для обработки изображения создается пользовательский веб сервис.

    // create a web service for image processing
    var webService = new Vintasoft.Shared.WebServiceControllerJS("/api/Processing");
    
    // Image is inverted successfully.
    function invertCommand_success(answer) {
        // get information about processed image
        var fileUrl = answer.imageInfo.fileInfo.id;
        var pageIndex = answer.imageInfo.pageIndex;
        // create new image source and image
        var source = new Vintasoft.Shared.WebImageSourceJS(fileUrl);
        var image = new Vintasoft.Shared.WebImageJS(source, pageIndex);
        // set processed image as the first image in image viewer
        imageViewer1.get_Images().set(0, image);
    }
    
    // Image processing command is failed.
    function invertCommand_error(answer) {
        if (answer.errorMessage)
            alert(answer.errorMessage);
    }
    
    // create an image processing command
    var invertCommand = new Vintasoft.Imaging.ImageProcessing.WebInvertCommandJS();
    // get reference to the first image in image viewer
    var image = imageViewer1.get_Images().get_Image(0);
    // execute the command on image using the web service
    invertCommand.execute(image, invertCommand_success, invertCommand_error, webService);
    


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

    // create a web service for processing of document images
    var webService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/ImageProcessingDocCleanupApi");
    // set the web service as the default web service for processing of document images
    Vintasoft.Shared.WebServiceJS.defaultImageProcessingDocCleanupService = webService;
    
    // Image is deskewed successfully.
    function deskewCommand_success(answer) {
        // get information about processed image
        var fileUrl = answer.imageInfo.fileInfo.id;
        var pageIndex = answer.imageInfo.pageIndex;
        // create new image source and image
        var source = new Vintasoft.Shared.WebImageSourceJS(fileUrl);
        var image= new Vintasoft.Shared.WebImageJS(source, pageIndex);
        // add the processed image to the end of image collection of image viewer
        imageViewer1.get_Images().add(image);
    }
    
    // Image processing command is failed.
    function deskewCommand_error(answer) {
        if (answer.errorMessage)
            alert(answer.errorMessage);
    }
    
    // get reference to the first image in image viewer
    var image = imageViewer1.get_Images().get_Image(0);
    // create an image processing command
    var deskewCommand = new Vintasoft.Imaging.ImageProcessing.DocCleanup.WebDeskewCommandJS();
    // specify that processed image must be saved to a new file
    deskewCommand.set_ChangeSource(false);
    // execute the command on image using the default web service
    deskewCommand.execute(image, deskewCommand_success, deskewCommand_error);
    


    1.2. Серверная сторона веб-приложения

    В зависимости от архитектуры веб приложения веб-серсис для обработки изображений может быть реализован на базе ASP.NET Web API контроллера, ASP.NET HTTP обработчика или любого другого веб сервиса, который совместим с .NET.

    SDK предоставляет следующие готовые к использованию ASP.NET Core Web API контроллеры для ASP.NET Core:

    SDK предоставляет следующие готовые к использованию контроллеры ASP.NET Web API 2 для ASP.NET MVC 5:
    SDK предоставляет следующие готовые к использованию ASP.NET HTTP обработчики для ASP.NET WebForms:
    SDK предоставляет следующие готовые к использованию независимые от платформы веб сервисы, которые могут использоваться для разработки зависимых от платформы веб сервисов, например, REST-сервисов на базе ServiceStack:
    Важно : Для корректной работы сборок Vintasoft.Imaging.AspNetCore.ApiControllers.dll, Vintasoft.Imaging.Web.Api2Controllers.dll и Vintasoft.Imaging.Web.HttpHandlers.dll необходимы сборки Vintasoft.Imaging.dll, Vintasoft.Shared.dll и Vintasoft.Shared.Web.dll.

    Важно : Для корректной работы сборок Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.dll, Vintasoft.Imaging.DocCleanup.Web.Api2Controllers.dll и Vintasoft.Imaging.DocCleanup.Web.HttpHandlers.dll необходимы сборки Vintasoft.Imaging.dll, Vintasoft.Imaging.DocCleanup.dll, Vintasoft.Shared.dll и Vintasoft.Shared.Web.dll.



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

    Класс WebUiImageProcessingPanelJS представляет собой UI-панель, которую можно использовать в боковой панели веб просмотрщика документов. Панель позволяет просматривать список команд обработки изображений, выбирать команду обработки изображения и применять её к изображению в веб просмотрщике изображений.

    Вот скриншот панели обработки изображений в веб приложении:



    Вот JavaScript код, который демонстрирует как добавить панель обработки изображений в боковую панель веб просмотрщика документов:
    var items = docViewerSettings.get_Items();
    
    var sidePanel = items.getItemByRegisteredId("sidePanel");
    if (sidePanel != undefined) {
        var sidePanelItems = sidePanel.get_PanelsCollection();
        sidePanelItems.addItem("imageProcessingPanel");
    }
    



    3. Демонстрационные приложения

    Демонстрационный проект AspNetCoreImagingDemo (включён в дистрибутив VintaSoft Imaging .NET SDK) демонстрирует, как обрабатывать изображения в ASP.NET Core с использованием веб сервисов на основе ASP.NET Core Web API контроллера.

    Демонстрационный проект AspNetMvcImagingDemo (включён в дистрибутив VintaSoft Imaging .NET SDK) демонстрирует, как обрабатывать изображения в ASP.NET MVC 5 с использованием веб сервисов на основе ASP.NET Веб API 2 контроллера.

    Проект AspNetImagingDemo (входит в дистрибутив VintaSoft Imaging .NET SDK) демонстрирует, как обрабатывать изображения в ASP.NET WebForms с помощью веб-служб на основе ASP.NET HTTP обработчика.