VintaSoft Imaging .NET SDK v8.8 for Web
In This Topic
    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:
    1. 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.
    2. Server-side: Web service receives the request, processes the image and sends the image processing results back to the JavaScript class.
    3. Client-side: JavaScript class processes the received results.

    1.1. Client-side of web application

    Vintasoft.Imaging.ImageProcessing namespace (defined in Vintasoft.Imaging.Svg.js or Vintasoft.Imaging.Html5.js file) defines the following commands for image processing:
    1. Abstract - base abstract commands:
    2. Base - commands, which implement basic image manipulation:
    3. Info - commands, which provide information about an image:
    4. Transforms - commands, which implement image representation transformation:
    5. Color - commands, which implement image color manipulation:
    6. Filters - commands, which implement graphic filters for image processing:
    7. Effects - commands, which implement some effects for editing images (especially photos) in a particular way and thus may make them more funny:
    8. 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:
    1. Document Cleanup - commands, which allow to process (cleanup, restore text, line removal, etc) a document image:
    2. 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:
    Important: JQuery (version 1.11 or higher) and Vintasoft.Shared.js file are necessary for correct work of Vintasoft.Imaging.Svg.js or Vintasoft.Imaging.Html5.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.

    // 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(convert_success, error_callback);
            // execute the command
                convertCommand.execute(image);
        }
    }
    
    // Image is converted to a black-white image successfully.
    function convert_success(answer) {
        // get information about converted image
        var fileUrl = answer.imageInfo.imageId;
        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(isImageBlack_success, error_callback);
    // 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);
                                
    


    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.

    // 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.imageId;
        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(invertCommand_success, invertCommand_error);
    // 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, 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.

    // 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.imageId;
        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(deskewCommand_success, deskewCommand_error);
    // 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);
                                
    


    1.2. Server-side of web application

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

    The SDK provides the following ready-to-use Web API 2 controllers for ASP.NET MVC 5:
    The SDK provides the following ready-to-use Web API controllers for ASP.NET MVC 4:
    The SDK provides the following ready-to-use HTTP handlers for ASP.NET WebForms:
    The SDK provides the following ready-to-use WCF services:
    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:
    Important: Vintasoft.Imaging.dll, Vintasoft.Shared.dll and Vintasoft.Shared.Web.dll assemblies are necessary for correct work of Vintasoft.Imaging.Web.ApiControllers.dll, Vintasoft.Imaging.Web.WcfServices.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.Web.ApiControllers.dll, Vintasoft.Imaging.DocCleanup.Web.WcfServices.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:
    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 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 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 HTTP handler.