VintaSoft Imaging .NET SDK 12.5: Документация для Веб разработчика
В этом разделе
    Добавление веб просмотрщика изображений в "Angular + ASP.NET Core" приложение.
    В этом разделе
    В этом руководстве показано, как создать пустое "Angular + ASP.NET Core" приложение в Visual Studio .NET 2022 и добавить веб просмотрщик изображений в "Angular + ASP.NET Core" приложение.


    Вот шаги, которые необходимо выполнить:
    1. Создайте пустое "Angular + ASP.NET Core" приложение.

      Откройте Visual Studio .NET 2022 и создайте новое приложение типа "Angular + ASP.NET Core":

      Настройте приложение для использования .NET 8.0:

    2. Серверная сторона: Добавьте ссылки на Vintasoft .NET-сборки в проект "AngularApp1.Server".

      Скопируйте файлы Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll и Vintasoft.Imaging.AspNetCore.ApiControllers.dll из папки "<SdkInstallPath>\VintaSoft Imaging .NET v12.5\Bin\DotNet8\AnyCPU\" в папку "Bin" проекта "AngularApp1.Server" и добавьте ссылки на .NET-сборки в проект "AngularApp1.Server".


    3. Серверная сторона: Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.

      Если проект "AngularApp1.Server" необходимо использовать в Windows или Linux, следует использовать движок рисования SkiaSharp.
      Если проект "AngularApp1.Server" необходимо использовать только в Windows, следует использовать движок рисования System.Drawing или SkiaSharp.

      Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
      • Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Drawing.SkiaSharp.dll.
      • Добавьте ссылку на nuget-пакет SkiaSharp версии 2.88.6.
      • Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать библиотеку SkiaSharp для рисования 2D-графики.

      Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
      • Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
      • Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало файла - добавленный код указывет, что VintaSoft Imaging .NET SDK должен использовать библиотеку System.Drawing для рисования 2D-графики.

    4. Серверная часть: Создайте веб сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры и рендерить тайлы изображений.

      • Создайте веб сервис, позволяющий загружать/скачивать файл

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
        • Укажите, что класс MyVintasoftFileApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController

          Вот исходные коды класса MyVintasoftFileApiController:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
              {
          
                  public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Создайте веб сервис, позволяющий управлять коллекцией изображений

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftImageCollectionApiController" и нажмите кнопку "Add".
        • Укажите, что класс MyVintasoftImageCollectionApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController

          Вот исходные коды класса MyVintasoftImageCollectionApiController:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
              {
          
                  public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
      • Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры и рендерить тайлы изображений.

        • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
        • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftImageApiController" и нажмите кнопку "Add".
        • Укажите, что класс MyVintasoftImageApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController

          Вот исходные коды класса MyVintasoftImageApiController:
          namespace AngularApp1.Server.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
              {
          
                  public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
          
          
    5. Серверная сторона: Создайте CORS-политику, позволяющую получать доступ к веб сервисам из клиентского приложения.

      • Откройте файл "Program.cs" в проекте "AngularApp1.Server" и добавьте код, который:
        • Создает CORS-политику, которая позволяет получать доступ к веб сервисам с веб сервера "localhost"
        • Включает использование CORS в проекте "AngularApp1.Server"

        Вот исходные коды файла "Program.cs" после обновления:
        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. Серверная сторона: Обновите стартовый URL-адрес приложения в файле "launchSettings.json".

      • Откройте файл "Properties\launchSettings.json" в "AngularApp1.Server" и очистите стартовый URL-адрес приложения:
    7. Сторона сервера: Скопируйте тестовый PDF документ по умолчанию на сторону сервера.

      • Создайте папку "UploadedImageFiles\SessionID" в проекте "AngularApp1.Server" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" в папку. Этот документ будет отображен в веб просмотрщике изображений.
    8. Скомпилируйте проект для восстановления зависимостей с помощью 'npm'

    9. Клиентская сторона: Удалите файлы, которые являются не нужными в этом руководстве.

      • Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "AngularApp1.Server" - ASP.NET Core Web API контроллер WeatherForecast не требуется в этом руководстве.

      • Удалить файлы "src\app\app.comComponent.css", "src\app\app.comComponent.html", "src\app\app.comComponent.spec.ts", "src \app\app.comComponent.ts" в проекте "angularapp1.client" - этот Angular-компонент не требуется в этом руководстве.
    10. Клиентская сторона: Добавьте JavaScript-файлы и TypeScript-модули в проект "angularapp1.client".

      • Добавьте папку "assets" в папку "src\app\" в проекте "angularapp1.client".

      • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js и Vintasoft.Imaging.d.ts из папки "<SdkInstallPath>\VintaSoft Imaging .NET v12.5" \Bin\JavaScript\" в папку "src\app\assets\".

      • Добавьте ссылки на используемые JavaScript-библиотеки в секцию "projects => Demo => architect => build => options => scripts" в файле "angular.json", добавьте ссылки на используемые CSS-файлы в секцию "projects => Demo => architect => build => options => styles" в файле "angular.json".
        Вот исходные коды файла "angular.json":
        {
          "$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. Клиентская сторона: Создайте Angular-компонент, который отображает веб просмотрщик изображений.

      • Создайте файл "image-viewer-demo.html", который будет содержать HTML-разметку Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "HTML Page" для нового элемента
        • Установите "image-viewer-demo.html" в качестве имени элемента
        • Нажмите кнопку "Add" => UI-диалог закроется и файл "image-viewer-demo.html" будет добавлен в папку "src\app\"

        Добавьте HTML-разметку (заголовок приложения и div-элемент для веб просмотрщика изображений) в файл "image-viewer-demo.html":


        Вот исходные коды файла "image-viewer-demo.html":
        <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>
        
        

      • Создать файл "image-viewer-demo.css", который будет содержать CSS-стили для Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "StyleSheet" для нового элемента
        • Установите "image-viewer-demo.css" в качестве имени элемента
        • Нажмите кнопку "Add" => UI-диалог закроется и файл "image-viewer-demo.css" будет добавлен в папку "src\app\"

        Добавьте CSS-стили в файл "image-viewer-demo.css":


        Вот исходные коды "image-viewer-demo.css.css":
        h1 {
          width: 1200px;
          text-align: center;
        }
        
        .imageViewerDemoContainer {
          display: flex;
        }
        
        .thumbnailViewerContainer {
          width: 200px;
          height: 800px;
        }
        
        .imageViewerContainer {
          width: 1200px;
          height: 800px;
        }
        
        

      • Создайте файл "image-viewer-demo.ts", который будет содержать код Angular-компонента:
        • Выберите контекстное меню "Add => New Item..." для папки "src\app\" => Появится UI-диалог "Add new item"
        • Выберите тип "TypeScript File" для нового элемента
        • Установите "image-viewer-demo.ts" в качестве имени элемента
        • Нажмите кнопку "Add" => диалог закроется и файл "image-viewer-demo.ts" будет добавлен в папку "src\app\"

        Добавьте TypeScript-код в файл "image-viewer-demo.ts":


        Важно: Visual Studio использует случайный сетевой порт для API ASP.NET Core, и вам необходимо обновить JavaScript-код и изменить URL-адрес веб-службы с "https://localhost:7259/" на URL-адрес в вашем приложении.

        Вот исходные коды файла "image-viewer-demo.ts":
        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';
        }
        
        

      • Добавьте созданный Angular-компонент в модуль Angular-приложения - "src\app\app Файл .module.ts":


        Вот исходные коды файла "app.module.ts" после обновления:
        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. Запустите "Angular + ASP.NET Core" приложение и посмотрите результат.