Как исправить искажение и ускорить переключение картинок в веб-клиенте 1С?

← На главную

При работе в тонком клиенте 1С отображение изображений обычно проходит без сбоев. Однако при переходе в веб-клиент разработчики часто сталкиваются с двумя проблемами: изображение визуально искажается (сжимается или растягивается с нарушением пропорций), а переключение между картинками по кнопкам навигации начинает существенно задерживаться. Проанализируем причины такого поведения и разберем практические способы оптимизации работы с графикой в веб-клиенте.

Причины возникновения проблемы с отображением и производительностью

Выясним, почему стандартное поведение формы 1С в веб-клиенте отличается от тонкого клиента:

Особенности рендеринга браузера: В тонком клиенте отрисовкой элементов управляет внутренний графический движок платформы. В веб-клиенте элемент формы транслируется в HTML/CSS браузера. Если режим масштабирования не совпадает с реальными пропорциями картинки, браузер рассчитывает размеры по алгоритмам разметки, что часто приводит к искажениям.
Задержки при работе с временным хранилищем: Использование навигационных ссылок на ВременноеХранилище вынуждает веб-клиент при каждой смене картинки выполнять дополнительный HTTP-запрос к веб-серверу 1С. При быстром переключении эти запросы встают в очередь.
Избыточный объем данных в Base64: Вставка Base64-строк высокого разрешения непосредственно в HTML-код раздувает DOM-дерево и сильно нагружает JavaScript-движок браузера.
Различия в валидации MIME-типов браузерами: Internet Explorer может лояльно относиться к некорректным заголовкам `data:image/...`, тогда как современные браузеры на базе Chromium (Google Chrome, Яндекс.Браузер, Edge) требуют точного соответствия MIME-типа (например, image/jpeg для JPG-файлов и image/png для PNG-файлов).

Решение 1: Вывод графики через Поле HTML документа с фиксированием пропорций

Рассмотрим альтернативный способ вывода — использование реквизита формы с типом Строка и видом Поле HTML документа. Это дает полный контроль над стилями CSS и масштабированием с помощью свойства object-fit.

Посмотрим на пример формирования HTML-кода с использованием кодирования в Base64 через функцию Base64Строка. Важно корректно указывать MIME-тип изображения в зависимости от его реального формата:


&НаСервере
Функция СформироватьHTMLКартинки(ДвоичныеДанныеФайла, РасширениеФайла)
    
    СтрокаBase64 = Base64Строка(ДвоичныеДанныеФайла);
    
    // Определяем верный MIME-тип для Chromium и других браузеров
    MIMEТип = "image/jpeg";
    Если НРегистр(РасширениеФайла) = "png" Тогда
        MIMEТип = "image/png";
    КонецЕсли;
    
    ТекстHTML = "<html>
                |<head>
                |<style>
                |  body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffffff; }
                |  img { max-width: 100%; max-height: 100%; object-fit: contain; }
                |</style>
                |</head>
                |<body>
                |  <img src=""data:" + MIMEТип + ";base64," + СтрокаBase64 + """ alt=""Картинка""/>
                |</body>
                |</html>";
                
    Возврат ТекстHTML;
КонецФункции

Использование CSS-стиля object-fit: contain; гарантирует, что картинка аккуратно впишется в отведённую область без искажения исходных пропорций.

Решение 2: Оптимизация размера изображений (Ресайз на стороне сервера)

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

Создание миниатюр на сервере: Перед отправкой изображения на клиент сжимаем его до точных пиксельных размеров элемента формы.
Использование внешних утилит: Подготовку уменьшенных копий файлов можно выполнять на сервере с помощью консольных утилит (например, ImageMagick) или встроенными средствами работы с объектом Картинка.
Уменьшение объема данных: Передача миниатюры размером 20–50 КБ вместо полноразмерного фото мгновенно устраняет задержки при переключении слайдов по кнопкам навигации.

Решение 3: Кэширование изображений через веб-сервер или HTTP-сервис

Если картинки хранятся во внешнем каталоге, наиболее эффективным решением будет публикация папки на веб-сервере (Apache / IIS) или создание собственного HTTP-сервиса внутри конфигурации 1С.

Проанализируем преимущества этого подхода:

Прямые ссылки (URL): Вместо навигационных ссылок временного хранилища или тяжелых Base64-строк в HTML передается прямая ссылка вида src="http://server/images/photo123.jpg".
Использование кэша браузера: При повторном вызове картинки браузер мгновенно извлекает её из локального кэша без отправки дублирующих запросов на сервер 1С.

Таким образом, сочетание предварительного уменьшения разрешения на сервере, использования поля HTML с точными CSS-стилями и браузерного кэширования позволяет полностью избавиться от визуальных искажений и обеспечить мгновенную работу веб-клиента 1С.