Добавление веб просмотрщика изображений в приложение "Angular и ASP.NET Core"

В этом разделе

В этом руководстве показано, как создать пустое приложение "Angular и ASP.NET Core" в Visual Studio .NET 2026 и добавить просмотрщик изображений в это приложение.

Вот шаги, которые необходимо выполнить:

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

Настройте приложение для использования .NET 10.0:
Проект "AngularApp1.Server": Добавьте ссылки на nuget-пакеты Vintasoft в проект "AngularApp1.Server".
Добавьте ссылки на nuget-пакеты "Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers" и "Vintasoft.Imaging.Pdf" в проект "AngularApp1.Server". Другие необходимые nuget-пакеты будут добавлены автоматически.
Проект "AngularApp1.Server": Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.
Если проект "AngularApp1.Server" необходимо использовать в Windows или Linux, следует использовать движок рисования SkiaSharp.
Если проект "AngularApp1.Server" необходимо использовать только в Windows, следует использовать движок рисования System.Drawing или SkiaSharp.

Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
- Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Drawing.SkiaSharp". Ссылка на nuget-пакет "SkiaSharp" версии 3.119.0 будет добавлена автоматически.
- Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать библиотеку SkiaSharp для рисования 2D-графики.
Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
- Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Gdi".
- Откройте файл "Program.cs" в проекте "AngularApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало файла - добавленный код указывет, что VintaSoft Imaging .NET SDK должен использовать библиотеку System.Drawing для рисования 2D-графики.
Проект "AngularApp1.Server": Создайте веб сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры, отображать тайлы изображений.
- Создайте веб сервис, позволяющий загружать/скачивать файл
  - Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
  - Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
  - Укажите, что класс MyVintasoftFileApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
    
    Вот исходные коды класса MyVintasoftFileApiController:
    C#
    
    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:
    C#
    
    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:
    C#
    
    namespace AngularApp1.Server.Controllers { public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController { public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
Проект "AngularApp1.Server": Скопируйте тестовый PDF документ на сторону сервера.
- Создайте папку "wwwroot\UploadedImageFiles\SessionID" в проекте "AngularApp1.Server" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" в эту папку. Этот файл будет отображаться в веб-просмотрщике документов.
Проект "AngularApp1.Server": Удалите файлы, которые не нужны в этом руководстве.
Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "AngularApp1.Server" - контроллер WeatherForecast Web API в этом примере не нужен.
Скомпилируйте решение для восстановления зависимостей TypeScript в проекте "angularapp1.client".

Проект "angularapp1.client": Добавьте файлы 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 15.0" \Bin\JavaScript\" в папку "src\app\assets\".

Добавьте ссылки на используемые библиотеки JavaScript в раздел "projects => angularapp1.client => architect => build => options => scripts" в файле "angular.json", добавьте ссылки на используемые файлы CSS в раздел "projects => angularapp1.client => architect => build => options => styles" в файле "angular.json".
Вот исходные коды файла "angular.json":

JSON

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angularapp1.client": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularapp1.client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/app/assets/Vintasoft.Shared.js",
              "src/app/assets/Vintasoft.Imaging.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angularapp1.client:build:production"
            },
            "development": {
              "browserTarget": "angularapp1.client:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "proxyConfig": "src/proxy.conf.js",
            "port": 65185
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angularapp1.client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "karmaConfig": "karma.conf.js"
          }
        }
      }
    }
  }
}

Проект "angularapp1.client": Создайте компонент Angular, который отображает просмотрщик изображений.

Откройте файл "src\app\app.component.html" в проекте "angularapp1.client", очистите файл, добавьте HTML-разметку (заголовок страницы и DIV-элемент для веб просмотрщика изображений) в файл "app.component.html":
- 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>
```

Откройте файл "src\app\app.component.ts" в проекте "angularapp1.client", очистите файл, добавьте код TypeScript в файл "app.component.ts":

TYPESCRIPT

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  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("/vintasoft/api/MyVintasoftFileApi");
    Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
      new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageCollectionApi");
    Vintasoft.Shared.WebServiceJS.defaultImageService =
      new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageApi");

    // create thumbnail viewer
    let thumbnailViewer: Vintasoft.Imaging.UI.WebThumbnailViewerJS =
      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: Vintasoft.Imaging.UI.WebImageViewerJS =
      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 = 'angularapp1.client';
}

Откройте файл "src\app\app.component.css" в проекте "angularapp1.client", добавьте CSS-стили для веб просмотрщиков в файл "app.component.ts":

HTML

:host {
    max-width: 1280px;
    padding: 2rem;
    text-align: center;
}

th, td {
    padding-left: 1rem;
    padding-right: 1rem;
}

table {
    margin: 0 auto;
}

.imageViewerDemoContainer {
  display: flex;
}

.thumbnailViewerContainer {
  width: 200px;
  height: 800px;
}

.imageViewerContainer {
  width: 1200px;
  height: 800px;
}

Удалите файл "src\app\app.component.spec.ts" в проекте "angularapp1.client" - файл не нужен.

Откройте файл "src\proxy.conf.js" в проекте "angularapp1.client" и укажите, что приложение Angular может иметь доступ к контроллеру ASP.NET Core Web API "/vintasoft/api/" в проекте "AngularApp1.Server":

JavaScript

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7200';

const PROXY_CONFIG = [
  {
    context: [
      "/vintasoft/api/"
    ],
    target,
    secure: false
  }
]

module.exports = PROXY_CONFIG;

Запустите приложение "Angular и ASP.NET Core" и посмотрите результат.

Отправить отзыв

Создайте пустое приложение "Angular и ASP.NET Core".

Проект "AngularApp1.Server": Добавьте ссылки на nuget-пакеты Vintasoft в проект "AngularApp1.Server".

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

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

Создайте веб сервис, позволяющий управлять коллекцией изображений

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

Проект "AngularApp1.Server": Скопируйте тестовый PDF документ на сторону сервера.

Проект "AngularApp1.Server": Удалите файлы, которые не нужны в этом руководстве.

Скомпилируйте решение для восстановления зависимостей TypeScript в проекте "angularapp1.client".

Проект "angularapp1.client": Добавьте файлы JavaScript и модули TypeScript в проект "angularapp1.client".

Проект "angularapp1.client": Создайте компонент Angular, который отображает просмотрщик изображений.

Запустите приложение "Angular и ASP.NET Core" и посмотрите результат.