Как отобразить и сделать кликабельной картинку из двоичных данных макета внешней обработки на форме в 1С?

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

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

Изначально разработчики, сталкиваясь с этой задачей, пытаются использовать прямые методы. Например, можно загрузить картинку в макет обработки как двоичные данные, а затем попробовать присвоить ее реквизиту формы типа Картинка или напрямую элементу формы:

КартинкаРеквизит = Новый Картинка(РеквизитФормыВЗначение("Объект").ПолучитьМакет("МояКартинка"));

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

Мы также можем рассмотреть вариант использования декораций. Однако, выясняем, что декорация типа "Картинка" имеет ограничения: программно ей можно присвоить только картинки из стандартной библиотеки или пустую картинку. Прямое присвоение объекта Картинка, созданного из двоичных данных, свойству Картинка декорации не поддерживается, о чем свидетельствует ошибка "Недопустимое значение".

Ключевая концепция 1С для работы с изображениями

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

1. Пути к файлам на диске (например, "C:\image.png").
2. Ссылки на изображения, хранящиеся в общих макетах или метаданных конфигурации (например, "библиотекакартинок/Добавить").
3. Ссылки на данные во временном хранилище.

Для нашего случая, когда изображение находится в макете обработки как двоичные данные, наиболее подходящим будет третий вариант – помещение изображения во временное хранилище.

Основное решение: Использование временного хранилища и реквизита типа "Строка"

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

Разберем по шагам, как это реализовать:

1. Создадим реквизит формы:

   Нам потребуется реквизит формы с типом данных Строка. Именно этот реквизит будет хранить путь к нашему изображению во временном хранилище. Мы можем назвать его, например, ИзображениеДляОтображения.

2. Разместим элемент формы:

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

   • Вид: Выберем "Поле картинки". Этот вид элемента специально предназначен для отображения изображений.
   • Данные: Укажем на наш ранее созданный реквизит формы ИзображениеДляОтображения. Таким образом, элемент формы будет отображать изображение, путь к которому хранится в этом реквизите.
3. Поместим картинку во временное хранилище:

   Основная логика будет заключаться в получении двоичных данных картинки из макета и их помещении во временное хранилище. Это действие обычно выполняется на сервере, например, в процедуре ПриСозданииНаСервере формы. Функция ПоместитьВоВременноеХранилище() вернет уникальную строку-ссылку (URL) на эти данные, которую мы и присвоим нашему строковому реквизиту формы.

   Скопировать код

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

   В этом коде Объект.ИзображениеДляОтображения — это наш реквизит формы типа Строка. После выполнения этого кода элемент "Поле картинки" на форме, связанный с этим реквизитом, автоматически загрузит и отобразит изображение по полученной ссылке.

Реализация интерактивности: Как сделать картинку кликабельной?

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

Разберем по шагам, как это реализовать:

1. Активируем свойство "Гиперссылка":

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

   Что это дает:

   • Курсор мыши при наведении на изображение изменится на "руку", сигнализируя пользователю о том, что элемент интерактивен.
   • Активируется возможность подписки на событие "Нажатие" для этого элемента.
2. Подпишемся на событие "Нажатие":

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

   Скопировать код

   
   &НаКлиенте
   Процедура ПолеДляКартинкиНажатие(Элемент, СтандартнаяОбработка)
       // Стандартная обработка (например, открытие картинки в новом окне браузера)
       // может быть нежелательна, поэтому мы ее отменяем.
       СтандартнаяОбработка = Ложь; 
               
       Сообщить("Вы нажали на картинку: " + Элемент.Имя + ". Ссылка: " + Объект.ИзображениеДляОтображения);
               
       // Дополнительные действия, которые должны выполняться при клике:
       // Например, можно открыть другую форму, вызвать серверную процедуру,
       // выполнить какую-либо бизнес-логику.
       ПоказатьПредупреждение(, "Нажатие на картинку: " + Элемент.Имя + Символы.ВК + "Ссылка: " + Объект.ИзображениеДляОтображения, 11);
               
       // Пример вызова серверной процедуры:
       // ВыполнитьДействиеНаСервере();
   КонецПроцедуры //ПолеДляКартинкиНажатие
   

   В этом примере ПолеДляКартинкиНажатие — это имя нашего обработчика события. Внутри него мы можем разместить любой код, который должен быть выполнен при клике пользователя по изображению.

Пример полного кода для модуля формы

Чтобы собрать все рассмотренные шаги воедино, давайте посмотрим на полный пример кода для модуля формы внешней обработки:

// ОБРАБОТКА (тупо внешняя):
// Предположим, у нас есть внешняя обработка.
// 1. В конфигураторе обработки создан реквизит формы "ИзображениеДляОтображения" типа "Строка".
// 2. В макетах обработки создан макет "МакетДвоичныеДанныеКартинка", в который загружена картинка.
// 3. В диалоге формы добавлен элемент типа "Поле" (например, с именем "ПолеДляКартинки"):
//    3.1. Вид = Поле картинки
//    3.2. Данные = Объект.ИзображениеДляОтображения
//    3.3. Гиперссылка = Да
//    3.4. Обработчик события "Нажатие" = "ПолеДляКартинкиНажатие"

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
    // Получаем двоичные данные картинки из макета обработки.
    ДвоичныеДанные = РеквизитФормыВЗначение("Объект").ПолучитьМакет("МакетДвоичныеДанныеКартинка");
    
    // Помещаем эти двоичные данные во временное хранилище.
    // УникальныйИдентификатор можно использовать для связывания ссылки с текущим сеансом,
    // что предотвратит ее преждевременное удаление.
    Объект.ИзображениеДляОтображения = ПоместитьВоВременноеХранилище(ДвоичныеДанные, УникальныйИдентификатор);
КонецПроцедуры //ПриСозданииНаСервере

&НаКлиенте
Процедура ПолеДляКартинкиНажатие(Элемент, СтандартнаяОбработка)
    // Отменяем стандартную обработку нажатия, чтобы 1С не пыталась
    // открыть ссылку самостоятельно (например, в браузере).
    СтандартнаяОбработка = Ложь; 
    
    // Выводим сообщение или выполняем другие действия.
    Сообщить("Вы нажали на картинку: " + Элемент.Имя + ".");
    Сообщить("Полная ссылка на картинку во временном хранилище: " + Объект.ИзображениеДляОтображения);
    
    // Пример использования ПоказатьПредупреждение
    ПоказатьПредупреждение(, Элемент.Имя + Символы.ВК + " = """ + Объект.ИзображениеДляОтображения + """", 11);
    
    // Здесь может быть вызов клиентской или серверной функции для выполнения логики.
    // Например:
    // ОбработатьКликПоКартинкеНаСервере(Элемент.Имя);
КонецПроцедуры //ПолеДляКартинкиНажатие

При таком подходе картинка корректно отображается на форме, и событие нажатия отрабатывает, позволяя реализовать любую необходимую интерактивность.

Дополнительные возможности: Реквизит с типом "Картинка" и гиперподсказки

Хотя реквизит формы с типом Картинка не используется для прямого отображения, он все же может быть полезен. Если мы используем такой реквизит, и на форме есть связанный с ним элемент (например, просто для отображения его гиперссылки), установка свойства Гиперссылка в Да для этого элемента может привести к тому, что при клике на него откроется сама картинка в новом окне. Также для такого элемента можно обработать событие "Нажатие".

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

Заключение

Итак, мы выяснили, что наиболее универсальный и рабочий способ отображения картинки из двоичных данных в управляемой форме 1С – это помещение ее во временное хранилище с помощью функции ПоместитьВоВременноеХранилище(). Полученная строка-ссылка присваивается реквизиту формы типа Строка, который затем связывается с элементом формы "Поле картинки". Для реализации интерактивности и обработки кликов по изображению необходимо установить свойство элемента формы "Гиперссылка" в "Да" и подписаться на событие "Нажатие". Этот подход обеспечивает гибкость, надежность и соответствует общей концепции работы 1С с изображениями.