Как вывести объект Картинка в поле HTML документа на обычных формах 1С

При разработке интерфейсов на обычных формах программисты часто сталкиваются с необходимостью отображения сложного контента, включая изображения, внутри поля HTML-документа. В отличие от управляемых форм, где многие механизмы автоматизированы, обычные формы используют прямой ActiveX объект Internet Explorer, что накладывает определенные ограничения. Рассмотрим подробнее, как решить задачу вывода объекта Картинка в такое поле.

Разберем суть проблемы

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

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

Метод 1: Использование Base64 (без сохранения на диск)

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

Рассмотрим по шагам процесс преобразования объекта 1С Картинка в строку, пригодную для HTML:

1. Получаем объект Картинка из базы данных или внешнего сервиса.
2. Преобразуем картинку в ДвоичныеДанные.
3. Кодируем двоичные данные в строку Base64.
4. Формируем тег img со специфическим значением атрибута src.

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

// Предположим, ОбъектКартинка — это наша картинка
ДвоичныеДанные = ОбъектКартинка.Преобразовать(ФорматКартинки.Jpeg); 
СтрокаBase64 = Base64Строка(ДвоичныеДанные);

// Важно: убираем символы переноса строк, если они есть
СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ВК, "");
СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ПС, "");

ТекстHTML = "<html><body>";
ТекстHTML = ТекстHTML + "<img src=""data:image/jpeg;base64," + СтрокаBase64 + """ />";
ТекстHTML = ТекстHTML + "</body></html>";

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

Важный нюанс: формат в строке data:image/jpeg;base64 должен соответствовать реальному формату данных. Если вы используете PNG, укажите image/png. Если формат указан неверно, старые версии движка рендеринга могут не отобразить изображение.

Метод 2: Использование временных файлов

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

Выясним причину, по которой обычные пути к файлам иногда не работают. Браузерные движки блокируют доступ к локальным ресурсам из соображений безопасности. Чтобы картинка отобразилась, путь должен быть правильно оформлен в формате URI.

Рассмотрим алгоритм работы с файлами:

1. Сохраняем картинку во временный файл во временном каталоге пользователя.
2. Преобразуем путь к файлу в формат file:///....
3. Подставляем этот путь в тег img.

Пример реализации на языке 1С:

ИмяФайла = ПолучитьИмяВременногоФайла("jpg");
ОбъектКартинка.Записать(ИмяФайла);

// Преобразуем путь для HTML
ПутьДляHTML = "file:///" + СтрЗаменить(ИмяФайла, "\", "/");

ТекстHTML = "<img src=""" + ПутьДляHTML + """ />";
ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);

Обратите внимание: использование временных файлов накладывает на разработчика обязанность по их очистке. Хорошим тоном считается удаление этих файлов при закрытии формы или при завершении работы обработки.

Технические ограничения и особенности

Проанализируем специфику движка Internet Explorer, который используется в обычных формах:

1. Ограничение длины строки: Старые версии (IE8 и ниже) имеют ограничение на длину src в 32 КБ при использовании Base64. Если ваша картинка больше, используйте метод с временными файлами.
2. Прозрачность: Формат PNG с прозрачностью может некорректно отображаться (с серым фоном) в очень старых операционных системах, где не обновлен браузер.
3. Кэширование: При использовании одного и того же имени временного файла для разных картинок, поле HTML может показать старое изображение из кэша. Чтобы этого избежать, добавляйте случайный параметр к пути: file:///C:/temp/img.jpg?rev=123.

Интерактивность: как сделать картинку кликабельной

Одним из преимуществ вывода через HTML является возможность легко добавить обработку клика по изображению. Мы можем передать информацию из HTML обратно в 1С. Для этого в коде HTML можно использовать объект window.external.

Пример добавления клика:

В HTML коде пишем: <img src="..." onclick="window.external.OnClickImage('ID_Картинки')">

Затем в 1С в событии ПриНажатии или через обработку событий COM-объекта документа можно перехватить это действие и, например, открыть картинку во внешнем просмоторщике или увеличить её в отдельном окне.

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