Как масштабировать картинку в поле HTML-документа в 1С

← На главную

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

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

Проблема прямого открытия файлов в Поле HTML

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

ЭлементыФормы.ПолеHTMLДокумента.Перейти(ИмяФайла);

При таком вызове движок операционной системы, отвечающий за отображение HTML (в старых версиях это Internet Explorer/Trident, в новых — Chromium), пытается открыть файл напрямую. Картинка открывается "как есть". Если ее разрешение составляет 4000x3000 пикселей, а размер вашего элемента управления на форме всего 400x300, пользователь увидит лишь крошечный фрагмент левого верхнего угла и гигантские полосы прокрутки. Нам необходимо заставить картинку подстраиваться под размеры контейнера.

Решение 1. Формирование HTML-контейнера со 100% шириной и высотой

Для того чтобы управлять масштабом, нам нужно обернуть картинку в полноценный HTML-код и задать ей соответствующие атрибуты ширины и высоты. Проанализируем базовый пример кода, который решает эту задачу:


ТекстПоляHTML = "    
|<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN"" ""http://www.w3.org/TR/html4/strict.dtd"">
|<html>
| <head>
|  <meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"">
|  <title>Размеры изображения</title>
| </head>
| <body style=""margin: 0; padding: 0; overflow: hidden;"">
|  <img src=""C:\1test\pic.jpg"" width=""100%"" height=""100%"" alt=""Изображение"">
| </body>
|</html>    
|";    
ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстПоляHTML);

Важное примечание: Обратите внимание, что в стили тега body мы добавили свойства margin: 0; padding: 0; overflow: hidden;. Это позволяет убрать стандартные отступы браузера по краям документа и принудительно скрыть полосы прокрутки, если картинка слегка не помещается из-за погрешностей округления размеров.

Этот способ прост и эффективен, однако у него есть существенный недостаток. Если пропорции вашего ПолеHTMLДокумента на форме (например, квадратное поле) не совпадают с пропорциями исходной картинки (например, широкоформатный снимок), изображение будет сильно искажено. Оно растянется или сожмется, потеряв правильные пропорции (Aspect Ratio).

Решение 2. Пропорциональное масштабирование средствами CSS

Выясним, как сделать так, чтобы картинка вписывалась в область просмотра красиво и без искажений. Для этого мы можем задействовать каскадные таблицы стилей (CSS).

Существует два основных сценария сохранения пропорций:

Масштабирование по большей стороне (вписывание). Картинка уменьшается или увеличивается так, чтобы полностью поместиться в поле HTML-документа. При этом по бокам или сверху могут остаться пустые поля. Это аналог режима "Пропорционально" у стандартного поля картинки 1С.
Заполнение всей области. Картинка масштабируется так, чтобы полностью закрыть собой всю площадь контейнера. При этом лишние части изображения, выходящие за границы поля, будут обрезаны. Это аналог режима "Заполнить" в 1С.

Рассмотрим реализацию первого сценария (вписывание) с использованием свойства max-width и max-height. Этот метод универсален и отлично работает даже на старых платформах 1С (где для рендеринга используется старый движок Internet Explorer):


ТекстHTML = "
|<html>
|<head>
| <style>
|  html, body {
|      height: 100%;
|      margin: 0;
|      padding: 0;
|      display: flex;
|      justify-content: center;
|      align-items: center;
|      background-color: #f0f0f0; /* Серый фон для пустых полей */
|  }
|  img {
|      max-width: 100%;
|      max-height: 100%;
|      width: auto;
|      height: auto;
|  }
| </style>
|</head>
|<body>
| <img src=""C:\1test\pic.jpg"">
|</body>
|</html>";
ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);

В данном примере мы использовали технологию CSS Flexbox для того, чтобы автоматически центрировать картинку по вертикали и горизонтали внутри поля, если ее пропорции не совпадают с пропорциями окна. Свойства max-width: 100% и max-height: 100% гарантируют, что изображение никогда не выйдет за рамки видимой области и сохранит свои пропорции.

Если ваша платформа 1С выпущена позже версии 8.3.14 (где используется современный Chromium), вы можете использовать более современное CSS-свойство object-fit:


ТекстHTML = "
|<html>
|<body style=""margin:0; padding:0; width:100%; height:100%; overflow:hidden;"">
| <img src=""C:\1test\pic.jpg"" style=""width:100%; height:100%; object-fit: contain;"">
|</body>
|</html>";

Значение object-fit: contain вписывает изображение с сохранением пропорций, а object-fit: cover масштабирует его для заполнения всей области с обрезкой краев.

Решение 3. Избавление от локальных путей к файлам (Best Practices)

Использование жестко прописанных путей вроде C:\1test\pic.jpg крайне не рекомендуется. В реальной работе база данных функционирует в клиент-серверном режиме, запускается на разных компьютерах пользователей, терминальных серверах или вообще через веб-клиент в браузере. У пользователя просто может не оказаться нужного файла по указанному пути.

Рассмотрим два профессиональных подхода к передаче изображений в HTML-поле напрямую из базы данных 1С.

Вариант А. Кодирование изображения в формат Base64 (Data URL)

Этот способ заключается в том, что мы считываем файл картинки в бинарном виде, преобразуем его в текстовую строку Base64 и внедряем эту строку прямо в атрибут src тега img. Никаких временных файлов на диске создавать не требуется.

Посмотрим на пример реализации данного алгоритма на языке 1С:


// Предположим, у нас есть объект Картинка из реквизита или файла
ДвоичныеДанныеКартинки = Новый ДвоичныеДанные("C:\1test\pic.jpg"); // или Картинка.ПолучитьДвоичныеДанные()

ДанныеВФорматеBase64 = Base64Строка(ДвоичныеДанныеКартинки);

// Очищаем строку от возможных символов переноса строк для повышения совместимости
ДанныеВФорматеBase64 = СтрЗаменить(ДанныеВФорматеBase64, Символы.ПС, "");
ДанныеВФорматеBase64 = СтрЗаменить(ДанныеВФорматеBase64, Символы.ВК, "");

// Формируем HTML-текст с использованием схемы data:
ТекстHTML = "
|<html>
|<body style=""margin:0; padding:0; overflow:hidden;"">
| <img src=""data:image/jpeg;base64," + ДанныеВФорматеBase64 + """ style=""width: 100%; height: 100%; object-fit: contain;"">
|</body>
|</html>";

ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);

Этот метод полностью автономен. HTML-код содержит в себе всё изображение целиком и откроется на любом компьютере без обращения к файловой системе.

Вариант Б. Использование временного хранилища 1С

Если вы работаете в управляемом приложении или используете платформу, поддерживающую работу с навигационными ссылками, гораздо более производительным решением будет поместить картинку во Временное хранилище 1С и передать полученный адрес в HTML.

Платформа 1С интегрирует внутренний веб-сервер для отображения HTML-документов, который умеет налету распознавать внутренние ссылки вида e1cib/tempstorage/.... Проанализируем, как это реализовать:


// Помещаем картинку во временное хранилище и получаем уникальный адрес ссылки
АдресХранилища = ПоместитьВоВременноеХранилище(Новый ДвоичныеДанные("C:\1test\pic.jpg"), Новый УникальныйИдентификатор);

// Подставляем адрес в тег src
ТекстHTML = "
|<html>
|<body style=""margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;"">
| <img src=""" + АдресХранилища + """ style=""width: 100%; height: 100%; object-fit: contain;"">
|</body>
|</html>";

// Если это Управляемые формы:
Элементы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);

Преимущество метода: Данный способ работает значительно быстрее, чем Base64, так как операционная система не тратит процессорное время на декодирование огромных текстовых строк обратно в бинарный формат картинки. Это критически важно при выводе больших чертежей или списков со множеством миниатюр.

Резюме

Мы подробно проанализировали различные варианты масштабирования изображений в поле HTML-документа 1С. Для простых сценариев в обычных формах на старых платформах оптимально использовать связку стилей max-width: 100%; height: auto;. Для современных конфигураций идеальным выбором станет использование свойства object-fit: contain в сочетании с передачей картинок через Временное хранилище 1С или Base64. Это гарантирует быструю, стабильную работу интерфейса и красивое отображение графической информации без искажения пропорций.