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

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().getImage(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().getImage(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().getImage(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 обработчика.