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

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

      Откройте Visual Studio .NET 2022 и создайте новый проект типа "ASP.NET Core Web Application":

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

    2. На стороне сервера: Добавьте ссылки на .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 приложение.


    3. Серверная сторона: Укажите движок рисования, который должен использоваться 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-графики.

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

      • Добавьте в проект папку "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)
                  {
                  }
          
              }
          }
          
          
    5. На стороне сервера: Создайте 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?}");
                    });
                }
            }
        }
        
        
    6. На стороне клиента: Создайте веб-представление для отображения веб просмотрщика изображений.

      • Откройте файл "DefaultController.cs", щёлкните правой кнопкой мыши по методу "Index" класса DefaultController и выберите в контекстном меню пункт "Add View...".
      • Выберите шаблон "Razor View", укажите имя представления "Index", снимите флажок "Use a layout page" и нажмите кнопку "Add" => будет создан файл "Views\Default\Index.cshtml".
    7. На стороне клиента: Добавьте в проект Vintasoft JavaScript-файлы.

      • Добавьте папку "wwwroot\Scripts\" в ASP.NET Core приложение.

      • Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "wwwroot\Scripts\".
    8. На стороне клиента: Добавьте 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>
        
        
    9. Запустите веб-приложение ASP.NET Core и посмотрите результат.