Обработка изображений в веб приложении
В этом разделе
1. JavaScript классы для обработки изображений в веб приложении
Современные веб-приложения выполняют все ресурсоёмкие операции асинхронно, поэтому обработка изображений также должна выполняться асинхронно.
Процесс обработки изображения в веб приложении можно разделить на следующие этапы:
- На стороне клиента: веб-приложение создает экземпляр JavaScript класса, который определяет команду обработки изображения и использует созданный экземпляр для отправки асинхронного запроса в веб-службе для обработки изображения.
- На стороне сервера: веб сервис получает запрос, обрабатывает изображение и отправляет результаты обработки изображения обратно JavaScript классу.
- На стороне клиента: JavaScript класс обрабатывает полученные результаты.
1.1. Клиентская сторона веб-приложения
Пространство имён Vintasoft.Imaging.ImageProcessing (определено в файле Vintasoft.Imaging.js) определяет следующие команды для обработки изображений:
-
Abstract
- базовые абстрактные команды:
-
Base
- команды, реализующие базовые манипуляции с изображением:
-
Info
- команды, предоставляющие информацию о изображении:
-
Transforms
- команды, выполняющие трансформацию изображения:
-
Color
- команды, реализующие манипулирование цветом изображения:
-
Filters
- команды, применяющие графические фильтры к изображению:
-
Effects
- команды, применяющие эффекты к изображению:
-
FFT
- команды, выполняющие обработку изображений в частотной области с использованием быстрого преобразования Фурье:
Пространство имён Vintasoft.Imaging.ImageProcessing.DocCleanup (определено в файле Vintasoft.Imaging.DocCleanup.js) определяет следующие команды для обработки изображений документов:
-
Document Cleanup
- команды, позволяющие обрабатывать (очищать, восстанавливать текст, удалять линии и т.д.) изображение документа:
-
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:
- класс Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageProcessingApiController из сборки Vintasoft.Imaging.AspNetCore.ApiControllers.dll, позволяющий создавать ASP.NET Core Web API контроллер для обработки изображений в ASP.NET Core
- класс Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.VintasoftImageProcessingDocCleanupApiController из сборки Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.dll, позволяющий создавать 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:
- класс Vintasoft.Imaging.ImageProcessing.Web.HttpHandlers.VintasoftImageProcessingHandler из сборки Vintasoft.Imaging.Web.HttpHandlers.dll, позволяющий создать ASP.NET HTTP обработчик для обработки изображений
- класс Vintasoft.Imaging.ImageProcessing.DocCleanup.Web.HttpHandlers.VintasoftImageProcessingDocCleanupHandler из сборки Vintasoft.Imaging.DocCleanup.Web.HttpHandlers.dll, позволяющий создать ASP.NET HTTP обработчик для обработки изображений документов
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 обработчика.