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

← На главную

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

Разберем причины возникновения проблемы

Прежде всего, важно понимать, что поле HTML-документа в 1С — это встроенный браузер. В зависимости от версии платформы и типа формы (обычная или управляемая) используется либо движок Internet Explorer (MSHTML), либо WebKit (Chromium). Основная причина, по которой картинка не отображается при использовании ссылки вида e1cib/tempstorage/... в обычных формах, заключается в том, что внутренний браузер старого образца не умеет напрямую работать с внутренними протоколами 1С. Для него такая ссылка является неопознанной, и он не может получить по ней данные из временного хранилища.

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

Способ 1: Использование Base64-кодирования

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

Проанализируем алгоритм реализации этого метода:

Получаем объект типа Картинка (например, из буфера обмена или реквизита базы).
Преобразуем картинку в ДвоичныеДанные.
Кодируем данные в строку Base64.
Формируем тег img, где в атрибуте src указываем тип данных и саму строку.

Посмотрим на пример кода, реализующий данный подход:


// Получаем двоичные данные из объекта Картинка
ДвоичныеДанные = Картинка.ПолучитьДвоичныеДанные();
// Преобразуем в строку Base64
СтрокаBase64 = Base64Строка(ДвоичныеДанные);

// Формируем HTML-текст
ТекстHTML = "<html><body>";
ТекстHTML = ТекстHTML + "<p>Текст сообщения с картинкой:</p>";
ТекстHTML = ТекстHTML + "<img src=""data:image/png;base64," + СтрокаBase64 + """ />";
ТекстHTML = ТекстHTML + "</body></html>";

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

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

Способ 2: Использование тега BASE для временного хранилища

Если вы работаете в обычных формах и все же хотите использовать временное хранилище 1С (протокол e1cib/tempstorage), нам потребуется «подсказать» полю HTML, где именно искать эти данные. Выясним причину, по которой это не работает по умолчанию: браузер воспринимает относительную ссылку как путь к локальному файлу, а не как запрос к серверу 1С.

Чтобы решить эту проблему, мы можем использовать HTML-тег <base>, который задает базовый URL для всех относительных ссылок в документе.

Посмотрим на пример реализации для обычных форм:


// Помещаем картинку во временное хранилище и получаем адрес
АдресВХ = ПоместитьВоВременноеХранилище(Новый Картинка(ПутьКФайлу), ЭтаФорма.УникальныйИдентификатор);

// Формируем путь к базе (для локальной версии или веб-сервера)
ПутьКБазе = "e1c://server/localhost/ИмяБазы/"; 

// Собираем HTML с указанием базового пути
АдресКартинки = "<!DOCTYPE html><html><head>";
АдресКартинки = АдресКартинки + "<base href=""" + ПутьКБазе + """></base>";
АдресКартинки = АдресКартинки + "</head><body>";
АдресКартинки = АдресКартинки + "<p><img src=""" + АдресВХ + """></img></p>";
АдресКартинки = АдресКартинки + "</body></html>";

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

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

Способ 3: Механизм объекта ФорматированныйДокумент

Проанализируем ситуацию, когда необходимо не просто отобразить картинку, а предоставить пользователю полноценный редактор текста. В 1С существует объект ФорматированныйДокумент. Он умеет автоматически обрабатывать изображения. При вставке картинки в такой документ платформа генерирует внутренние ссылки вида src="img_1", src="img_2" и так далее.

Разберем, как работает этот механизм изнутри:

При сохранении данных ФорматированныйДокумент возвращает HTML-текст и отдельно структуру с картинками.
Ключами в этой структуре являются те самые идентификаторы img_....
Чтобы отобразить такой текст в обычном поле HTML, необходимо программно выполнить замену этих идентификаторов на реальные пути или Base64-строки.

Это именно тот «четвертый способ», который часто встречается в типовых конфигурациях (например, в ITIL или подсистемах управления взаимодействиями). Платформа берет на себя управление коллекцией картинок, а программист лишь подставляет их при финальном рендеринге. Для реализации подобного функционала можно использовать расширяемый WYSIWYG-редактор форматированного текста для 1С.

Сравнение методов и рекомендации

Выясним, какой метод лучше выбрать для вашей задачи:

Base64 — идеален для разовой вставки скриншотов, небольших иконок или когда форма не предполагает редактирования огромных объемов текста. Работает везде: в обычных и управляемых формах, в тонком, толстом и веб-клиенте.
Временное хранилище (e1cib) — лучше всего работает в управляемых формах (УФ), так как там интеграция браузера с сеансом 1С выполнена на уровне платформы. В обычных формах требует манипуляций с тегом base.
Локальные файлы (file://) — наименее предпочтительный вариант. Он требует наличия файлов на диске у пользователя, что создает проблемы с правами доступа и очисткой временных папок. Кроме того, современные браузеры (WebKit в УФ) часто блокируют такие ссылки из соображений безопасности (CORS).

Важный совет по кэшированию: если вы используете временные файлы на диске и обновляете картинку с тем же именем, браузер может показать старое изображение из кэша. Чтобы заставить его обновиться, добавляйте к пути случайный параметр, например: src="file:///C:/temp/image.png?v=12345".

Таким образом, мы рассмотрели все основные подходы к интеграции графики в HTML-поля 1С. Выбор конкретного метода зависит от архитектуры вашей формы и требований к производительности, но использование Base64 остается «золотым стандартом» для большинства прикладных задач разработки.