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

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

    Откройте Visual Studio .NET 2019, создайте новый проект типа "ASP.NET Web Application" и настройте его для использования .NET Framework 4.7.2:

    Выберите шаблон "Empty" для ASP.NET веб-приложения и настройте проект для использования WebForms:

  2. На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ASP.NET WebForms приложение.

    Добавьте ссылки на .NET-сборки Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Web.Handlers.dll из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.1\Bin\DotNet4\AnyCPU\" в ASP.NET WebForms приложение.



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

    Приложение ASP.NET WebForms должно использовать библиотеку System.Drawing в качестве графического движка, поскольку приложение ASP.NET WebForms может использоваться только в Windows.

    Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
    • Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
    • Откройте файл "Default.aspx.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало метода Page_Load - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку System.Drawing для отрисовки 2D-графики.

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

    • Добавьте папку "Handlers" в приложение ASP.NET WebForms.
    • Создайте веб сервис, позволяющий загружать/скачивать файл

      • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
      • Укажите имя обработчика "MyVintasoftFileHandler" и нажмите кнопку "Ok".
      • Укажите, что класс MyVintasoftFileHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftFileHandler.

        Вот C# код класса MyVintasoftFileHandler:
        namespace WebApplication1.Handlers
        {
            public class MyVintasoftFileHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler
            {
            }
        }
        
        
    • Создайте веб сервис, позволяющий управлять коллекцией изображений

      • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
      • Укажите имя обработчика "MyVintasoftImageCollectionHandler" и нажмите кнопку "Ok".
      • Укажите, что класс MyVintasoftImageCollectionHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageCollectionHandler.

        Вот C# код класса MyVintasoftImageCollectionHandler:
        namespace WebApplication1.Handlers
        {
            public class MyVintasoftImageCollectionHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageCollectionHandler
            {
            }
        }
        
        
    • Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры, рендерить тайлы изображений, извлекать/искать текст

      • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
      • Укажите имя обработчика "MyVintasoftImageHandler" и нажмите кнопку "Ok".
      • Укажите, что класс MyVintasoftImageHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageHandler.

        Вот C# код класса MyVintasoftImageHandler:
        namespace WebApplication1.Handlers
        {
            public class MyVintasoftImageHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageHandler
            {
            }
        }
        
        
  5. На стороне клиента: Добавьте в проект Vintasoft JavaScript-файлы.

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

    • Скопируйте файл jQuery (версии 3 или выше) в папку "Scripts".
      Вы можете использовать файл jquery-3.3.1.min.js из папки "\VintaSoft Imaging .NET 14.1\Examples\ASP.NET WebForms\CSharp\AspNetImagingDemo\Scripts\External\" или файл jQuery (версии 3 или выше) из любого другого источника.

    • Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "\VintaSoft Imaging .NET 14.1\Bin\JavaScript\" в папку "Scripts".
  6. На стороне клиента: Добавьте JavaScript-код, который инициализирует и отображает веб просмотрщик изображений, в веб-форму "Default".

    • Создайте папку "UploadedImageFiles\SessionID" и скопируйте PDF документ "VintaSoft\Imaging .NET 14.1\Images\VintasoftImagingDemo.pdf" в созданную папку. Этот документ будет отображаться в веб просмотрщике изображений.

    • Создайте веб-форму "Default" - файл "Default.aspx".
      • Щёлкните правой кнопкой мыши по проекту и выберите в контекстном меню пункт "Add => WebForm":


      • Укажите "Default" в качестве имени веб-формы => откроется созданная веб-форма:

    • Добавьте ссылки на JavaScript-файлы Vintasoft:

      Вот HTML-код, который добавляет ссылки на файлы jQuery и JavaScript-файлы Vintasoft:
      <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
      <script src="Scripts/raphael.js" type="text/javascript"></script>
      
      <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 WebForms)</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-код (с разметкой страницы), который отображает веб просмотрщик изображений:
      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
      
      <!DOCTYPE html>
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <title>VintaSoft Image Viewer Demo (ASP.NET WebForms)</title>
      
          <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
          <script src="Scripts/raphael.js" type="text/javascript"></script>
      
          <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
          <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
      </head>
      <body>
          <form id="form1" runat="server">
              <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET WebForms)</h1>
      
              <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float: left"></div>
              <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float: left"></div>
          </form>
      
          <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.WebServiceHandlerJS("/Handlers/MyVintasoftFileHandler.ashx");
              Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                  new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageCollectionHandler.ashx");
              Vintasoft.Shared.WebServiceJS.defaultImageService =
                  new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageHandler.ashx");
      
              // 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>
      
      
  7. Запустите ASP.NET WebForms приложение и посмотрите результат.