При разработке управляемых форм (УФ) в 1С часто возникает задача вывести изображение: логотип компании, фотографию сотрудника или изображение товара — с этим поможет вывод изображений номенклатуры в формы списков. На первый взгляд задача кажется тривиальной — создать реквизит с типом Картинка и вывести его на форму. Однако, как показывает практика, этот подход не работает напрямую. Изображение просто не появляется, либо платформа выдает предупреждения об абсолютных путях.
В этой статье мы подробно разберем, почему так происходит, и рассмотрим три проверенных способа отображения графики на управляемых формах, учитывая нюансы работы в тонком, веб- и мобильном клиентах.
Давайте проанализируем самую распространенную ошибку. Разработчик создает реквизит формы с типом Картинка, перетаскивает его в элементы формы (получая элемент вида "Поле картинки") и пытается программно присвоить ему значение. Но картинка остается пустой.
Дело в том, что архитектура управляемых форм (клиент-серверная) требует особого подхода к передаче "тяжелых" данных. Элемент формы Поле картинки ожидает получить не сам двоичный файл изображения, а строку навигационной ссылки (адрес), указывающую, где это изображение лежит (в базе данных или во временном хранилище).
Поэтому правильная связка выглядит так:
Рассмотрим рабочие методы реализации.
Если нам нужно просто вывести логотип или иконку, которая не будет меняться в процессе работы с формой (например, картинка из библиотеки картинок конфигурации), использовать программный код не обязательно.
Разберем этот метод:
Важно: Как было замечено в обсуждении, этот метод имеет ограничения. На мобильных клиентах (в мобильном приложении) картинки, заданные через декорацию, могут не отображаться из-за особенностей оптимизации трафика или кэширования платформой. Если вы разрабатываете под мобильную платформу, лучше использовать второй способ.
Это самый универсальный метод. Он подходит, если картинку нужно загрузить с диска, получить из базы данных или сформировать программно. Суть метода заключается в преобразовании файла в ДвоичныеДанные, помещении их во временное хранилище и передаче адреса этого хранилища в строковый реквизит формы.
Разберем по шагам:
Шаг 1. Подготовка реквизитов
Создадим реквизит формы (например, АдресКартинки) с типом Строка. Длину строки лучше не ограничивать. Разместим этот реквизит на форме, платформа автоматически создаст поле ввода. Нам нужно изменить вид этого поля на Поле картинки — для этого подойдёт расширение вывода изображений товаров в форме списка.
Шаг 2. Загрузка картинки из файла на диске
Если файл лежит на диске (на стороне сервера или доступен клиенту), нам нужно получить его двоичные данные. Рассмотрим пример кода на сервере:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Указываем путь к файлу
ПутьКФайлу = "C:\Images\Logo.png";
// Создаем объект ДвоичныеДанные из файла
ДвоичныеДанныеКартинки = Новый ДвоичныеДанные(ПутьКФайлу);
// Помещаем данные во временное хранилище
// Возвращаемое значение - это строковый адрес (например, "e1cib/tempstorage/...")
АдресВХранилище = ПоместитьВоВременноеХранилище(ДвоичныеДанныеКартинки, УникальныйИдентификатор);
// Присваиваем адрес нашему реквизиту формы
АдресКартинки = АдресВХранилище;
КонецПроцедуры
Шаг 3. Загрузка картинки из Библиотеки картинок конфигурации
Иногда требуется программно вывести картинку, которая уже есть в конфигурации (в общих картинках), но мы хотим управлять её отображением через код. Стандартные картинки также нужно преобразовать в двоичные данные.
&НаСервере
Процедура УстановитьКартинкуИзБиблиотеки()
// Получаем картинку из библиотеки как объект
КартинкаИзЛибы = БиблиотекаКартинок.BCGВопросы; // Пример имени картинки
// Преобразуем в двоичные данные
ДвоичныеДанныеКартинки = КартинкаИзЛибы.ПолучитьДвоичныеДанные();
// Помещаем во временное хранилище
АдресКартинки = ПоместитьВоВременноеХранилище(ДвоичныеДанныеКартинки, УникальныйИдентификатор);
КонецПроцедуры
Обратите внимание на использование параметра УникальныйИдентификатор в функции ПоместитьВоВременноеХранилище. Это связывает временный файл с жизнью текущей формы. Если форму закрыть, временное хранилище очистится.
Если возможностей стандартного "Поля картинки" недостаточно (например, нужно сложное форматирование, обтекание текстом или специфическое масштабирование), можно использовать элемент формы вида Поле HTML-документа.
В этом случае мы тоже оперируем строковым реквизитом, но в него помещаем HTML-код.
Есть два варианта указания источника изображения в HTML:
<img src='...'>.Пример формирования HTML с Base64:
&НаСервере
Функция ПолучитьHTMLСКартинкой(ПутьКФайлу)
Двоичные = Новый ДвоичныеДанные(ПутьКФайлу);
СтрокаBase64 = Base64Строка(Двоичные);
// Формируем HTML
ТекстHTML = "<html><body>";
ТекстHTML = ТекстHTML + "<img src=""data:image/png;base64," + СтрокаBase64 + """ style=""width:100%;"" />";
ТекстHTML = ТекстHTML + "</body></html>";
Возврат ТекстHTML;
КонецФункции
Для успешного отображения картинки на форме, давайте запомним ключевые правила:
ДвоичныеДанные -> ПоместитьВоВременноеХранилище.Используя эти методы, вы сможете гибко управлять графическим интерфейсом ваших решений на платформе 1С:Предприятие — ускоряет работу удобный просмотр изображений товаров в форме списка.