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

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

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

Проблема прямого отображения по навигационной ссылке

Когда мы используем стандартный метод ПерейтиПоНавигационнойСсылке(), система зачастую открывает изображение во внешнем браузере, установленном в операционной системе по умолчанию. Однако для бизнес-логики часто требуется, чтобы изображение было частью интерфейса обработки или документа. Разберем ситуацию: у нас есть URL вида http://127.0.0.1:8091/test.jpg, и мы хотим видеть его внутри формы 1С.

Простейший путь — использовать элемент формы Поле HTML-документа. Теоретически, достаточно присвоить реквизиту, связанному с этим полем, строку с HTML-тегом img. Проанализируем пример кода:


СсылкаНаКартинку = "http://127.0.0.1:8091/test.jpg";
ПолеHTML = "<html><body style='margin:0; padding:0;'><img src='" + СсылкаНаКартинку + "' style='width:100%;'></body></html>";

Важный нюанс: если после выполнения этого кода картинка не отображается, хотя в обычном браузере она доступна, причина может крыться в настройках безопасности или особенностях движка рендеринга. В старых версиях платформы использовался движок Internet Explorer, который мог блокировать "смешанный контент" (Mixed Content) или требовать специфических настроек зоны безопасности.

Метод 1: Загрузка через HTTP-соединение и отображение в Поле картинки

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

  1. Создадим HTTPСоединение с сервером-источником.
  2. Выполним HTTPЗапрос для получения двоичных данных картинки.
  3. Поместим полученные данные во временное хранилище.
  4. Привяжем адрес хранилища к реквизиту формы с видом Поле картинки.

Разберем пример кода для реализации этого метода:


// Определяем параметры подключения
Сервер = "127.0.0.1";
Порт = 8091;
ПутьКФайлу = "/test.jpg";

// Создаем соединение
Соединение = Новый HTTPСоединение(Сервер, Порт);
Запрос = Новый HTTPЗапрос(ПутьКФайлу);

Попытка
    Ответ = Соединение.Получить(Запрос);
    Если Ответ.КодСостояния = 200 Тогда
        // Получаем двоичные данные из тела ответа
        ДД = Ответ.ПолучитьТелоКакДвоичныеДанные();
        
        // Помещаем во временное хранилище, чтобы клиент мог увидеть картинку
        // УникальныйИдентификатор — это идентификатор текущей формы
        АдресКартинки = ПоместитьВоВременноеХранилище(ДД, ЭтаФорма.УникальныйИдентификатор);
        
        // РеквизитФормыКартинка — это строковый реквизит, связанный с элементом "Поле картинки"
        ЭтаФорма.РеквизитФормыКартинка = АдресКартинки;
    КонецЕсли;
Исключение
    Сообщить("Ошибка при загрузке изображения: " + ОписаниеОшибки());
КонецПопытки;

Метод 2: Работа с защищенным соединением (HTTPS)

Часто при попытке выполнить Соединение.Получить(Запрос) разработчики сталкиваются с ошибкой "unsupported protocol". Выясним причину: это происходит, когда целевой ресурс работает по протоколу HTTPS, а в коде 1С не указано использование защищенного соединения.

Для решения этой задачи необходимо инициализировать объект ЗащищенноеСоединениеOpenSSL. Посмотрим, как изменится наш код:


ЗащищенноеСоединение = Новый ЗащищенноеСоединениеOpenSSL();
// Передаем объект защищенного соединения в конструктор HTTPСоединение
Соединение = Новый HTTPСоединение("ваш-сервер.рф", , , , , , ЗащищенноеСоединение);

Запрос = Новый HTTPЗапрос("/image.png");
Ответ = Соединение.Получить(Запрос);
// Далее обработка аналогична методу 1

Если сервер требует авторизации (что часто бывает у камер), мы можем добавить заголовки авторизации в HTTPЗапрос или указать логин/пароль непосредственно в параметрах HTTPСоединение.

Метод 3: Внедрение картинки в HTML через Base64

Бывают ситуации, когда нам принципиально нужно использовать именно Поле HTML-документа (например, если нужно наложить поверх картинки текстовые маркеры или кнопки), но прямая ссылка не работает из-за политики безопасности (CORS). В этом случае мы можем внедрить изображение прямо в тело HTML-кода в виде строки Base64.

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


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

// Формируем HTML с внедренными данными
ТекстHTML = "<html><body>";
ТекстHTML = ТекстHTML + "<img src='data:image/jpeg;base64," + СтрокаBase64 + "' />";
ТекстHTML = ТекстHTML + "</body></html>";

ЭтаФорма.ПолеHTMLРеквизит = ТекстHTML;

Этот метод гарантирует, что картинка отобразится, так как браузеру внутри 1С не нужно делать дополнительных запросов к сторонним ресурсам — все данные уже находятся внутри HTML-страницы.

Рекомендации по обновлению изображения

Если ваша задача — трансляция потока с камеры (имитация видео), вам потребуется обновлять картинку через определенные интервалы времени. Выясним важный момент: 1С и встроенные браузеры активно кэшируют изображения. Чтобы заставить систему загрузить новую порцию данных, используйте "хвостовой" параметр в URL.

Например, вместо test.jpg запрашивайте test.jpg?t=123456789, где t — это текущая метка времени или случайное число. Рассмотрим пример:


ТекущаяМетка = Формат(ТекущаяДата(), "ДФ=yyyyMMddHHmmss");
Запрос = Новый HTTPЗапрос("/test.jpg?nocache=" + ТекущаяМетка);

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

Заключение

Мы рассмотрели три основных подхода к отображению внешних картинок. Первый метод (через временное хранилище) — самый простой и надежный для обычных форм. Второй метод обязателен при работе с защищенными протоколами. Третий метод (Base64) дает максимальную гибкость при работе с HTML-разметкой. Выбор конкретного решения зависит от требований безопасности вашей сети и архитектуры используемой конфигурации.

← На главную