Добавление веб просмотрщика изображений в приложение ASP.NET Core.
В этом разделе
В этом руководстве показано, как создать пустое ASP.NET Core приложение в Visual Studio .NET 2022 и добавить веб просмотрщик изображений в ASP.NET Core приложение.
Вот шаги, которые необходимо выполнить:
-
Создайте пустое ASP.NET Core приложение.
Откройте Visual Studio .NET 2022 и создайте новый проект типа "ASP.NET Core Web Application":
Настройте проект для использования .NET 8.0:
-
На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ваше ASP.NET Core приложение.
Скопируйте .NET-сборки 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" ASP.NET Core приложения и добавьте ссылки на .NET-сборки в ASP.NET Core приложение.
-
Серверная сторона: Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.
Если ASP.NET Core приложение планируется использовать в среде Windows или Linux, рекомендуется применять графический движок SkiaSharp.
Если ASP.NET Core приложение будет использоваться только в среде Windows, можно применять как графический движок System.Drawing, так и SkiaSharp.
Вот шаги, которые необходимо выполнить для использования движка SkiaSharp:
-
Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Drawing.SkiaSharp.dll.
- Добавьте ссылку на nuget-пакет SkiaSharp версии 2.88.9.
- Откройте файл "Startup.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" в начало метода ConfigureServices - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку SkiaSharp для отрисовки 2D-графики.
Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
-
Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
- Откройте файл "Startup.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало метода ConfigureServices - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку System.Drawing для отрисовки 2D-графики.
-
Серверная часть: Создайте веб сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры и рендерить тайлы изображений.
- Добавьте в проект папку "Controllers".
-
Создайте веб сервис, позволяющий загружать/скачивать файл
-
Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
-
Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
-
Укажите, что класс MyVintasoftFileApiController является производным от класса Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
Вот исходные коды класса MyVintasoftFileApiController:
using Microsoft.AspNetCore.Hosting;
namespace WebApplication1.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:
using Microsoft.AspNetCore.Hosting;
namespace WebApplication1.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:
using Microsoft.AspNetCore.Hosting;
namespace WebApplication1.Controllers
{
public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
{
public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
: base(hostingEnvironment)
{
}
}
}
-
На стороне сервера: Создайте MVC-контроллер для веб-представления, которое будет отображать веб просмотрщик изображений.
-
Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
-
Выберите шаблон "MVC Controller - Empty", укажите имя контроллера "DefaultController" и нажмите кнопку "Add".
-
Откройте файл "Startup.cs" и добавьте контроллеры с представлениями в сервисы ASP.NET Core приложения:
Добавьте созданный MVC-контроллер в конечные точки ASP.NET Core приложения:
Включите обслуживание статических файлов для текущего пути запроса ASP.NET Core приложения:
Вот C# код файла Startup.cs:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace WebApplication1
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
// specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
services.AddControllersWithViews();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
});
}
}
}
-
На стороне клиента: Создайте веб-представление для отображения веб просмотрщика изображений.
-
Откройте файл "DefaultController.cs", щёлкните правой кнопкой мыши по методу "Index" класса DefaultController и выберите в контекстном меню пункт "Add View...".
-
Выберите шаблон "Razor View", укажите имя представления "Index", снимите флажок "Use a layout page" и нажмите кнопку "Add" => будет создан файл "Views\Default\Index.cshtml".
-
На стороне клиента: Добавьте в проект Vintasoft JavaScript-файлы.
-
Добавьте папку "wwwroot\Scripts\" в ASP.NET Core приложение.
-
Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\Scripts\".
-
На стороне клиента: Добавьте JavaScript-код, который позволяет отображать веб просмотрщик изображений.
-
Создайте папку "wwwroot\UploadedImageFiles\SessionID" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Images\VintasoftImagingDemo.pdf" в созданную папку. Этот документ будет отображаться в веб просмотрщике изображений.
-
Откройте веб-представление - файл "Views\Default\Index.cshtml".
-
Добавьте ссылки на JavaScript-файлы Vintasoft:
Вот HTML-код, который добавляет ссылки на Vintasoft JavaScript-файлы:
<script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
-
Добавьте в веб-представление HTML-разметку (div-элемент, который будет отображать веб просмотрщик изображений):
Вот код HTML-разметки:
<h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET Core)</h1>
<div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
<div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
-
Добавьте JavaScript-код, который инициализирует и создаёт веб просмотрщик изображений:
Вот JavaScript-код, который инициализирует и отображает веб просмотрщик изображений:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>VintaSoft Image Viewer Demo (ASP.NET Core)</title>
<script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
</head>
<body>
<h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET Core)</h1>
<div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
<div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
<script type="text/javascript">
// 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");
// create image viewer
var imageViewer = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
// 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");
</script>
</body>
</html>
-
Запустите веб-приложение ASP.NET Core и посмотрите результат.