VintaSoft Imaging .NET SDK 12.4: Documentation for Web developer
In This Topic
    Add web image viewer to an Angular and ASP.NET Core application
    In This Topic
    This tutorial shows how to create a blank Angular and ASP.NET Core application in Visual Studio .NET 2022 and add image viewer to Angular and ASP.NET Core application.


    Here are steps, which must be done:
    1. Create a blank Angular and ASP.NET Core application.

      Open Visual Studio .NET 2022 and create a new application of "Angular and ASP.NET Core" type:

      Configure the application to use .NET 8.0:

    2. Server side: Add references to the Vintasoft assemblies to "AngularApp1.Server" project.

      Copy Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll and Vintasoft.Imaging.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\DotNet8\AnyCPU\" directory to the "Bin" directory of "AngularApp1.Server" project and add references to assemblies in "AngularApp1.Server" project.


    3. Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

      If "AngularApp1.Server" project must be used in Windows or Linux, SkiaSharp drawing engine should be used.
      If "AngularApp1.Server" project must be used in Windows only, System.Drawing or SkiaSharp drawing engine should be used.

      Here are steps, which should be made for using SkiaSharp engine:
      • Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
      • Add reference to the SkiaSharp nuget-package version 2.88.6.
      • Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

      Here are steps, which should be made for using System.Drawing engine:
      • Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
      • Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

    4. Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails and render image tiles.

      • Create web service that allows to upload/download file

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
        • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class

          Here are source codes of MyVintasoftFileApiController class:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
              {
          
                  public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Create web service that allows to manage image collection

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
        • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class

          Here are source codes of MyVintasoftImageCollectionApiController class:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
              {
          
                  public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Create web service that allows to get information about images, get thumbnails and render image tiles

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
        • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class

          Here are source codes of MyVintasoftImageApiController class:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
              {
          
                  public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
    5. Server side: Create CORS-policy that allows to access web services from client side.

      • Open the "Program.cs" file in "AngularApp1.Server" project and add code that:
        • Creates CORS-policy that allows to access web services from "localhost"
        • Enables CORS usage in "AngularApp1.Server" project

        Here are source codes of "Program.cs" file after update:
        Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
        
        var builder = WebApplication.CreateBuilder(args);
        
        // Add services to the container.
        
        builder.Services.AddControllers();
        
        builder.Services.AddCors(options =>
        {
            options.AddPolicy(name: "CorsPolicy1", policy =>
            {
                policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
            });
        });
        
        var app = builder.Build();
        
        app.UseDefaultFiles();
        app.UseStaticFiles();
        
        // Configure the HTTP request pipeline.
        
        app.UseHttpsRedirection();
        
        app.UseAuthorization();
        
        app.UseCors("CorsPolicy1");
        
        app.MapControllers();
        
        app.MapFallbackToFile("/index.html");
        
        app.Run();
        
        
    6. Server side: Update launch URL in 'launchSettings.json' file.

      • Open file "Properties\launchSettings.json" in "AngularApp1.Server" and clear launch URL:
    7. Server side: Copy the default test PDF document to a server side.

      • Create folder "UploadedImageFiles\SessionID" in "AngularApp1.Server" project and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in image viewer.
    8. Compile the project for restoring dependencies using 'npm'.

    9. Client side: Delete files, which are not necessary in this tutorial.

      • Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "AngularApp1.Server" project - the WeatherForecast Web API controller is not necessary in this tutorial.

      • Delete files "src\app\app.component.css", "src\app\app.component.html", "src\app\app.component.spec.ts", "src\app\app.component.ts" in "angularapp1.client" project - this Angular-component is not necessary in this tutorial.
    10. Client side: Add JavaScript files and TypeScript modules to the "angularapp1.client" project.

      • Add the "assets" folder to the "src\app\" folder in "angularapp1.client" project.

      • Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js and Vintasoft.Imaging.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder to the "src\app\assets\" folder.

      • Add references to used JavaScript libraries to the "projects => Demo => architect => build => options => scripts" section in "angular.json" file, add references to used CSS-files to the "projects => Demo => architect => build => options => styles" section in "angular.json" file.
        Here are source codes of "angular.json" file:
        {
          "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
          "version": 1,
          "newProjectRoot": "projects",
          "projects": {
            "WebApplication1": {
              "root": "",
              "sourceRoot": "src",
              "projectType": "application",
              "prefix": "app",
              "schematics": {},
              "architect": {
                "build": {
                  "builder": "@angular-devkit/build-angular:browser",
                  "options": {
                    "progress": false,
                    "extractCss": true,
                    "outputPath": "dist",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "src/tsconfig.app.json",
                    "assets": [ "src/assets" ],
                    "styles": [
                      "node_modules/bootstrap/dist/css/bootstrap.min.css",
                      "src/styles.css"
                    ],
                    "scripts": [
                      "src/app/assets/Vintasoft.Shared.js",
                      "src/app/assets/Vintasoft.Imaging.js"
                    ]
                  },
                  "configurations": {
                    "production": {
                      "fileReplacements": [
                        {
                          "replace": "src/environments/environment.ts",
                          "with": "src/environments/environment.prod.ts"
                        }
                      ],
                      "optimization": true,
                      "outputHashing": "all",
                      "sourceMap": false,
                      "extractCss": true,
                      "namedChunks": false,
                      "aot": true,
                      "extractLicenses": true,
                      "vendorChunk": false,
                      "buildOptimizer": true
                    }
                  }
                },
                "serve": {
                  "builder": "@angular-devkit/build-angular:dev-server",
                  "options": {
                    "browserTarget": "WebApplication1:build"
                  },
                  "configurations": {
                    "production": {
                      "browserTarget": "WebApplication1:build:production"
                    }
                  }
                },
                "extract-i18n": {
                  "builder": "@angular-devkit/build-angular:extract-i18n",
                  "options": {
                    "browserTarget": "WebApplication1:build"
                  }
                },
                "test": {
                  "builder": "@angular-devkit/build-angular:karma",
                  "options": {
                    "main": "src/test.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "src/tsconfig.spec.json",
                    "karmaConfig": "src/karma.conf.js",
                    "styles": [ "src/styles.css" ],
                    "scripts": [],
                    "assets": [ "src/assets" ]
                  }
                },
                "lint": {
                  "builder": "@angular-devkit/build-angular:tslint",
                  "options": {
                    "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ],
                    "exclude": [ "**/node_modules/**" ]
                  }
                },
                "server": {
                  "builder": "@angular-devkit/build-angular:server",
                  "options": {
                    "outputPath": "dist-server",
                    "main": "src/main.ts",
                    "tsConfig": "src/tsconfig.server.json"
                  },
                  "configurations": {
                    "dev": {
                      "optimization": true,
                      "outputHashing": "all",
                      "sourceMap": false,
                      "namedChunks": false,
                      "extractLicenses": true,
                      "vendorChunk": true
                    },
                    "production": {
                      "optimization": true,
                      "outputHashing": "all",
                      "sourceMap": false,
                      "namedChunks": false,
                      "extractLicenses": true,
                      "vendorChunk": false
                    }
                  }
                }
              }
            },
            "WebApplication1-e2e": {
              "root": "e2e/",
              "projectType": "application",
              "architect": {
                "e2e": {
                  "builder": "@angular-devkit/build-angular:protractor",
                  "options": {
                    "protractorConfig": "e2e/protractor.conf.js",
                    "devServerTarget": "WebApplication1:serve"
                  }
                },
                "lint": {
                  "builder": "@angular-devkit/build-angular:tslint",
                  "options": {
                    "tsConfig": "e2e/tsconfig.e2e.json",
                    "exclude": [ "**/node_modules/**" ]
                  }
                }
              }
            }
          },
          "defaultProject": "WebApplication1"
        }
        
        

    11. Client side: Create Angular-component that displays image viewer.

      • Create "image-viewer-demo.html" file that will contain HTML markup of Angular-component:
        • Select "Add => New Item..." context menu for folder "src\app\" => "Add new item" dialog will appear
        • Select "HTML Page" type for new item
        • Set "image-viewer-demo.html" as element name
        • Click the "Add" button => dialog will be closed and file "image-viewer-demo.html" will be added into folder "src\app\"

        Add HTML markup (demo header and div element for image viewer) to the "image-viewer-demo.html" file:


        Here are source codes of "image-viewer-demo.html" file:
        <h1>VintaSoft Image Viewer Demo (Angular + ASP.NET Core)</h1>
        
        <div class="imageViewerDemoContainer">
          <div id="WebThumbnailViewer1Div" class="thumbnailViewerContainer"></div>
          <div id="WebImageViewer1Div" class="imageViewerContainer"></div>
        </div>
        
        

      • Create "image-viewer-demo.css" file that will contain CSS-styles of Angular-component:
        • Select "Add => New Item..." context menu for folder "src\app\" => "Add new item" dialog will appear
        • Select "StyleSheet" type for new item
        • Set "image-viewer-demo.css" as element name
        • Click the "Add" button => dialog will be closed and file "image-viewer-demo.css" will be added into folder "src\app\"

        Add CSS-styles to the "image-viewer-demo.css" file:


        Here are source codes of "image-viewer-demo.css" file:
        h1 {
          width: 1200px;
          text-align: center;
        }
        
        .imageViewerDemoContainer {
          display: flex;
        }
        
        .thumbnailViewerContainer {
          width: 200px;
          height: 800px;
        }
        
        .imageViewerContainer {
          width: 1200px;
          height: 800px;
        }
        
        

      • Create "image-viewer-demo.ts" file that will contain code of Angular-component:
        • Select "Add => New Item..." context menu for folder "src\app\" => "Add new item" dialog will appear
        • Select "TypeScript File" type for new item
        • Set "image-viewer-demo.ts" as element name
        • Click the "Add" button => dialog will be closed and file "image-viewer-demo.ts" will be added into folder "src\app\"

        Add TypeScript code to the "image-viewer-demo.ts" file:


        Important: Visual Studio uses randomized network port for ASP.NET Core API and you need to update JavaScript code and change web services URL from "https://localhost:7259/" to URL in your application.

        Here are source codes of "image-viewer-demo.ts" file:
        import { Component, OnInit } from '@angular/core';
        
        @Component({
          selector: 'app-root',
          templateUrl: './image-viewer-demo.html',
          styleUrl: './image-viewer-demo.css'
        })
        export class ImageViewerDemo implements OnInit {
          constructor() { }
        
          ngOnInit() {
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
        
            // specify web services, which should be used by Vintasoft Web Document Viewer
            Vintasoft.Shared.WebServiceJS.defaultFileService =
              new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftFileApi");
            Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
              new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftImageCollectionApi");
            Vintasoft.Shared.WebServiceJS.defaultImageService =
              new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7259/vintasoft/api/MyVintasoftImageApi");
        
            // create thumbnail viewer
            let thumbnailViewer = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
            // specify that thumbnail viewer should not cache thumbnails on server side
            thumbnailViewer.set_UseCache(false);
        
            // create image viewer
            let imageViewer = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
            // specify that image viewer should not cache image tiles on server side
            imageViewer.set_UseCache(false);
        
            // specify that image viewer depends from thumbnail viewer
            imageViewer.set_MasterViewer(thumbnailViewer);
        
            // open file from session folder and add images from file to the image viewer
            imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
        
          }
        
          title = 'VintaSoft Angular Image Viewer Demo';
        }
        
        

      • Add created Angular-component to the Angular-application module - "src\app\app.module.ts" file:


        Here are source codes of "app.module.ts" file after update:
        import { HttpClientModule } from '@angular/common/http';
        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        
        import { AppRoutingModule } from './app-routing.module';
        import { ImageViewerDemo } from './image-viewer-demo';
        
        @NgModule({
          declarations: [
            ImageViewerDemo
          ],
          imports: [
            BrowserModule, HttpClientModule,
            AppRoutingModule
          ],
          providers: [],
          bootstrap: [ImageViewerDemo]
        })
        export class AppModule { }
        
        
    12. Run the Angular and ASP.NET Core application and see the result.