Добавление веб просмотрщика изображений в "React + ASP.NET Core" приложение
В этом разделе
В этом руководстве показано, как создать пустое "React + ASP.NET Core" приложение в Visual Studio .NET 2022 и добавить веб просмотрщик изображений в "React + ASP.NET Core" приложение
Вот шаги, которые необходимо выполнить:
-
Создайте пустое "React + ASP.NET Core" приложение.
-
Откройте Visual Studio .NET 2022 и создайте новое приложение типа "React + ASP.NET Core":
-
Настройте приложение для использования .NET 8.0:
-
Серверная часть: Добавьте ссылки на .NET-сборки Vintasoft в проект "ReactApp1.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 14.0\Bin\DotNet8\AnyCPU\" в папку "Bin" проекта "ReactApp1.Server" и добавьте ссылки на .NET-сборки в проект "ReactApp1.Server".
-
Серверная сторона: Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.
Если проект "ReactApp1.Server" необходимо использовать в Windows или Linux, следует использовать движок рисования SkiaSharp.
Если проект "ReactApp1.Server" необходимо использовать только в Windows, следует использовать движок рисования System.Drawing или SkiaSharp.
Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
-
Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Drawing.SkiaSharp.dll.
- Добавьте ссылку на nuget-пакет SkiaSharp версии 2.88.9.
- Откройте файл "Program.cs" в проекте "ReactApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать библиотеку SkiaSharp для рисования 2D-графики.
Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
-
Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
- Откройте "Program.cs" в проекте "ReactApp1.Server", добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало файла - добавленный код указывает, что VintaSoft Imaging .NET SDK должен использовать System.Drawing библиотека для рисования 2D-графики
-
Серверная часть: Создайте веб сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры и рендерить тайлы изображений.
-
Создайте веб сервис, позволяющий загружать/скачивать файл
-
Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
-
Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
-
Укажите, что класс MyVintasoftFileApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
Вот исходные коды класса MyVintasoftFileApiController:
namespace ReactApp1.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 ReactApp1.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 ReactApp1.Server.Controllers
{
public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
{
public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
: base(hostingEnvironment)
{
}
}
}
-
Серверная сторона: Создайте CORS-политику, позволяющую получать доступ к веб сервисам из клиентского приложения.
-
Откройте файл "Program.cs" в проекте "ReactApp1.Server" и добавьте код, который:
- Создает CORS-политику, которая позволяет получать доступ к веб сервисам с веб сервера "localhost"
- Включает использование CORS в проекте "ReactApp1.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();
-
Серверная сторона: Обновите стартовый URL-адрес приложения в файле "launchSettings.json".
-
Откройте файл "Properties\launchSettings.json" в "ReactApp1.Server" и очистите стартовый URL-адрес приложения:
-
Сторона сервера: Скопируйте тестовый PDF документ по умолчанию на сторону сервера.
- Создайте папку "UploadedImageFiles\SessionID" в проекте "ReactApp1.Server" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles \VintasoftImagingDemo.pdf" в папку. Этот документ будет отображен в веб просмотрщике документов.
Скомпилируйте проект для восстановления зависимостей с помощью 'npm'
-
Удалите файлы, которые не нужны в этом руководстве.
-
Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" в проекте "ReactApp1.Server" - ASP.NET Core Web API контроллер WeatherForecast не требуется в этом руководстве.
- Удалите файлы "src\App.css" и "src\App.jsx" - этот React-компонент не требуется в этом руководстве.
-
Клиентская сторона: Добавьте JavaScript-файлы в проект "reactapp1.client".
-
Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "public".
-
Добавьте ссылки на Vintasoft JavaScript-файлы в заголовок файла "index.html":
Вот исходные коды файла "index.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>Vite + React</title>
<link rel="stylesheet" type="text/css" href="src/ImageViewerDemo.css">
<script src="public/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="public/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\ImageViewerDemo.css" :
Вот исходные коды файла "ImageViewerDemo.css":
h1 {
width: 1200px;
text-align: center;
}
.imageViewerDemoContainer {
display: flex;
}
.thumbnailViewerContainer {
width: 200px;
height: 800px;
}
.imageViewerContainer {
width: 1200px;
height: 800px;
}
-
Клиентская сторона: Создайте React-компонент, который отображает веб просмотрщик изображений.
-
Создайте файл "ImageViewerDemo.jsx", который будет содержать исходные коды React-компонента (класс ImageViewerDemo):
- Выберите контекстное меню "Add => New Item..." для папкb "src\" => Появится UI-диалог "Add new item"
- Выберите тип "JSX-файл" для нового элемента
- Установите "ImageViewerDemo.jsx" в качестве имени элемента
- Нажмите кнопку "Add" => UI-диалог закроется и файл "ImageViewerDemo.jsx" будет добавлен в папку "src\"
Добавьте объявление класса ImageViewerDemo с функцией "render" (отображает заголовок приложения, div-элемент для веб просмотрщика изображений, div-элемент для веб просмотрщика миниатюр) в файл "ImageViewerDemo.jsx":
Добавьте функцию "componentDidMount" (содержит JavaScript-код, который инициализирует и создает веб просмотрщик изображений) в класс ImageViewerDemo:
Вот исходные коды файла "ImageViewerDemo.jsx":
import { Component } from 'react';
export class ImageViewerDemo extends Component {
static displayName = ImageViewerDemo.name;
static _isInitialized = false;
render() {
return (
<div>
<h1>VintaSoft Image Viewer Demo (React + ASP.NET Core)</h1>
<div className="imageViewerDemoContainer">
<div id="WebThumbnailViewer1Div" className="thumbnailViewerContainer"></div>
<div id="WebImageViewer1Div" className="imageViewerContainer"></div>
</div>
</div>
);
}
componentDidMount() {
if (this._isInitialized)
return;
this._isInitialized = true;
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("https://localhost:7240/vintasoft/api/MyVintasoftFileApi");
Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftImageCollectionApi");
Vintasoft.Shared.WebServiceJS.defaultImageService =
new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/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");
}
}
-
Добавьте созданный React-компонент в код React-приложения - "src\main .jsx-файл.
Вот исходные коды файла "main.jsx" после обновления:
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ImageViewerDemo } from './ImageViewerDemo.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ImageViewerDemo />
</React.StrictMode>,
)
-
Запустите "React + ASP.NET Core" приложение и посмотрите результат.