Process images in web application

In This Topic

1. JavaScript classes for image processing in web application

A modern web application performs all resource-intensive operation asynchronously, so the image processing should be performed also asynchronously.

The image processing process in web application can be divided into the following steps:

Client-side: Web application creates an instance of JavaScript class, which defines the image processing command, and uses created instance for sending an asynchronous request to a web service for image processing.
Server-side: Web service receives the request, processes the image and sends the image processing results back to the JavaScript class.
Client-side: JavaScript class processes the received results.

1.1. Client-side of web application

Vintasoft.Imaging.ImageProcessing namespace (defined in Vintasoft.Imaging.js file) defines the following commands for image processing:

Abstract - base abstract commands:
Base - commands, which implement basic image manipulation:
Info - commands, which provide information about an image:
Transforms - commands, which implement image representation transformation:
Color - commands, which implement image color manipulation:
Filters - commands, which implement graphic filters for image processing:
Effects - commands, which implement some effects for editing images (especially photos) in a particular way and thus may make them more funny:
FFT - commands, which performs image processing in frequency domain using Fast Fourier Transform:

The Vintasoft.Imaging.ImageProcessing.DocCleanup namespace (defined in Vintasoft.Imaging.DocCleanup.js file) defines the following commands for processing of document images:

Document Cleanup - commands, which allow to process (cleanup, restore text, line removal, etc) a document image:
Document Cleanup Info - commands, which provide information about a document image:

The command that changes the image allows to specify how the image will be saved. WebImageProcessingCommandWithSourceChangeJS.set_ChangeSource function defines whether the changed image will be saved to the source file or to a new file.

WebImageProcessingCommandBaseJS.execute function sends an asynchronous request for image processing. As parameters the function takes:

the image, which should be processed
the web service, which is used for processing of the image (if necessary)

Important: JQuery (version 1.11 or higher) and Vintasoft.Shared.js file are necessary for correct work of Vintasoft.Imaging.js file.

Example: Here is an example that demonstrates how to determine if the image is a black-white one and convert it to black-white if not. For image processing is used a default web service.

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);

Example: Here is an example that demonstrates how to invert the image stored on server and save the changes to the source file. For image processing is created a special web service.

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);

Example: Here is an example that demonstrates how to detect the correct orientation of document image stored on server and save the change to a new file. For image processing is used a default web service.

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. Server-side of web application

Depending on application architecture the web service, which processes images, can be based on Web API controller, ASP.NET HTTP handler or any other web service, which is compatible with .NET Framework.

The SDK provides the following ready-to-use Web API controllers for ASP.NET Core:

Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageProcessingApiController class, from Vintasoft.Imaging.AspNetCore.ApiControllers.dll assembly, allows to create Web API controller for processing images in ASP.NET Core.
Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.VintasoftImageProcessingDocCleanupApiController class, from Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.dll assembly, allows to create Web API controller for processing document images in ASP.NET Core.

The SDK provides the following ready-to-use Web API 2 controllers for ASP.NET MVC 5:

VintasoftImageProcessingApi2Controller class, from Vintasoft.Imaging.Web.Api2Controllers.dll assembly, allows to create Web API 2 controller for processing images in ASP.NET MVC 5.
VintasoftImageProcessingDocCleanupApi2Controller class, from Vintasoft.Imaging.DocCleanup.Web.Api2Controllers.dll assembly, allows to create Web API 2 controller for processing document images in ASP.NET MVC 5.

The SDK provides the following ready-to-use ASP.NET HTTP handlers for ASP.NET WebForms:

Vintasoft.Imaging.ImageProcessing.Web.HttpHandlers.VintasoftImageProcessingHandler class, from Vintasoft.Imaging.Web.HttpHandlers.dll assembly, allows to create the ASP.NET HTTP handler for processing images.
Vintasoft.Imaging.ImageProcessing.DocCleanup.Web.HttpHandlers.VintasoftImageProcessingDocCleanupHandler class, from Vintasoft.Imaging.DocCleanup.Web.HttpHandlers.dll assembly, allows to create the ASP.NET HTTP handler for processing document images.

The SDK provides the following ready-to-use platform-independent web services, which can be used for developing platform-dependent web services, for example, REST services based on ServiceStack:

VintasoftImageProcessingWebService class, from Vintasoft.Imaging.Web.Services.dll assembly, is a platform-independent web service for processing images.
VintasoftImageProcessingDocCleanupWebService class, from Vintasoft.Imaging.DocCleanup.Web.Services.dll assembly, is a platform-independent web service for processing document images.

Important: Vintasoft.Imaging.dll, Vintasoft.Shared.dll and Vintasoft.Shared.Web.dll assemblies are necessary for correct work of Vintasoft.Imaging.AspNetCore.ApiControllers.dll, Vintasoft.Imaging.Web.Api2Controllers.dll or Vintasoft.Imaging.Web.HttpHandlers.dll assembly.

Important: Vintasoft.Imaging.dll, Vintasoft.Imaging.DocCleanup.dll , Vintasoft.Shared.dll and Vintasoft.Shared.Web.dll assemblies are necessary for correct work of Vintasoft.Imaging.DocCleanup.AspNetCore.ApiControllers.dll, Vintasoft.Imaging.DocCleanup.Web.Api2Controllers.dll or Vintasoft.Imaging.DocCleanup.Web.HttpHandlers.dll assembly.

2. Web Document Viewer UI for image processing in web application

WebUiImageProcessingPanelJS class represents a web UI panel that can be used in side panel of web document viewer and allows to view a list of image processing commands, select the image processing command and apply the image processing command to an image in image viewer.

Here is screenshot of image processing panel in web application:

Here is an example of JavaScript code, which demonstrates how to add the image processing panel into the side panel of web document viewer:

JavaScript

var items = docViewerSettings.get_Items();

var sidePanel = items.getItemByRegisteredId("sidePanel");
if (sidePanel != undefined) {
    var sidePanelItems = sidePanel.get_PanelsCollection();
    sidePanelItems.addItem("imageProcessingPanel");
}

3. Demo applications

The AspNetCoreImagingDemo project (included in the distributive package of VintaSoft Imaging .NET SDK) demonstrates how to process images in ASP.NET Core using the web service based on Web API controller.

The AspNetMvcImagingDemo project (included in the distributive package of VintaSoft Imaging .NET SDK) demonstrates how to process images in ASP.NET MVC using the web service based on Web API 2 controller.

The AspNetImagingDemo project (can be found in distributive package of VintaSoft Imaging .NET SDK) demonstrates how to process images in ASP.NET WebForms using the web service based on ASP.NET HTTP handler.

Send Feedback