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

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

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

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

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

Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
- Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Drawing.SkiaSharp". Ссылка на nuget-пакет "SkiaSharp" версии 4.151.1 будет добавлена автоматически.
- Откройте файл "Program.cs" в проекте "ReactApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать библиотеку SkiaSharp для рисования 2D-графики.
Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
- Добавьте ссылку на nuget-пакет "Vintasoft.Imaging.Gdi".
- Откройте "Program.cs" в проекте "ReactApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать System.Drawing библиотека для рисования 2D-графики
Проект "ReactApp1.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) { } } }
Проект "ReactApp1.Server": Скопируйте тестовый PDF документ на сервер.
- Создайте папку "UploadedImageFiles\SessionID" в проекте "ReactApp1.Server" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET 15.2\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles \VintasoftImagingDemo.pdf" в папку. Этот документ будет отображен в веб просмотрщике документов.
Удалите файлы, которые не нужны в этом руководстве.
Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "ReactApp1.Server" - контроллер WeatherForecast Web API в этом примере не нужен.
Скомпилируйте решение для восстановления зависимостей TypeScript в проекте "reactapp1.client".

Проект "reactapp1.client": Добавьте файлы JavaScript в проект "reactapp1.client".

Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.2\Bin\JavaScript\" в папку "public".

Добавьте ссылки на Vintasoft JavaScript-файлы в заголовок файла "index.html":

Вот исходные коды файла "index.html":

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>reactapp1.client</title>

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Добавьте CSS-стили для этого приложения в файл "src\App.css":

Вот исходный код файла "App.css":

HTML

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.imageViewerDemoContainer {
  display: flex;
}

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

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

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

Откройте файл "src\App.jsx" в проекте "reactapp1.client", очистите файл и добавьте код функций "App" и "__init". Функция "App" возвращает HTML-разметку (заголовок страницы и DIV-элементы для веб просмотрщика изображений и веб просмотрщика миниатюр). Функция "__init" инициализирует приложение и создает веб просмотрщик изображений и веб просмотрщик миниатюр.
Вот код файла "src\App.jsx":

JavaScript

import './App.css'

function App() {
    return (
        <>
            <h1>VintaSoft Image Viewer Demo (React.js + ASP.NET Core)</h1>

            <div className="imageViewerDemoContainer">
                <div id="WebThumbnailViewer1Div" className="thumbnailViewerContainer"></div>
                <div id="WebImageViewer1Div" className="imageViewerContainer"></div>
            </div>

            <script>{setTimeout(__init, 10)}</script>
        </>
    )
}

/**
 * Initializes application.
 */
function __init() {
    var Vintasoft = window.Vintasoft;

    // 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
    var 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
    var 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");
}

export default App

Откройте файл "vite.config.js" в проекте "reactapp1.client" и укажите, что приложение React.js может иметь доступ к контроллеру ASP.NET Core Web API "/vintasoft/api/" в проекте "ReactApp1.Server":

JavaScript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

const target = 'https://localhost:7109';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '^/vintasoft/api/': {
                target,
                secure: false
            }
        },
        port: 7109
    }
})

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

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

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

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

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

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

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

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

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

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

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

Проект "reactapp1.client": Добавьте файлы JavaScript в проект "reactapp1.client".

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

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