Как пропорционально отобразить картинку в ячейке табличной части 1С?

← На главную

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

Причины поведения ячеек таблицы и ограничения платформы

Выясним причину такого отображения. В отличие от отдельного элемента управления формы («Поле картинки»), ячейки таблицы исторически оптимизированы для вывода стандартных пиктограмм состояния, высота которых жестко привязана к высоте текстовой строки.

Когда мы отключаем свойство АвтоВысотаСтроки и вручную увеличиваем высоту и ширину ячейки, механизм отрисовки таблицы не выполняет динамическое векторное или растровое масштабирование под произвольный размер элемента. Платформа начинает отображать файл в масштабе 1:1, показывая лишь тот фрагмент, который физически поместился в заданную область. Если же высота строки оставлена по умолчанию, картинка сжимается до высоты стандартной строки текста.

Решение 1. Штатное масштабирование с помощью объекта ОбрабатываемаяКартинка

Наиболее правильным и производительным подходом является подготовка уменьшенной копии (миниатюры) изображения перед выводом в таблицу. Платформа 1С предоставляет для этого встроенный объект ОбрабатываемаяКартинка, доступный на стороне сервера.

Использование этого объекта позволяет обойтись без сторонних утилит и выполнить сжатие прямо в оперативной памяти. Разберем реализацию по шагам:

Получаем двоичные данные исходного файла.
Создаем объект ОбрабатываемаяКартинка и передаем в него исходные данные.
Вызываем метод УстановитьРазмер() или Масштабировать() с нужными габаритами.
Получаем сжатую картинку методом ПолучитьКартинку(), помещаем ее во временное хранилище и выводим адрес в ячейку таблицы.

Посмотрим на пример серверной функции, выполняющей подготовку миниатюры:


Функция ПолучитьМиниатюру(ДвоичныеДанныеОригинала, НужнаяШирина, НужнаяВысота) Экспорт
    Обработка = Новый ОбрабатываемаяКартинка(ДвоичныеДанныеОригинала);
    Обработка.УстановитьРазмер(НужнаяШирина, НужнаяВысота);
    
    Миниатюра = Обработка.ПолучитьКартинку();
    Возврат ПоместитьВоВременноеХранилище(Миниатюра.ПолучитьДвоичныеДанные());
КонецФункции

Такой подход обеспечивает высокую скорость работы: клиентское приложение не загружает «тяжелые» исходные файлы для каждой строки списка, что снижает нагрузку на сеть и оперативную память.

Решение 2. Использование внешней компоненты для изменения размера

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

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


Процедура ВыборФайла(Результат, Адрес, Имя, Доп) Экспорт
    Попытка 
        ПодключитьВнешнююКомпоненту("AddIn.GraphicsNET"); 
    Исключение 
        Сообщить(ОписаниеОшибки()); 
        Возврат; 
    КонецПопытки; 
    
    Попытка 
        GraphicsVK = Новый("AddIn.GraphicsNET"); 
    Исключение 
        Сообщить(ОписаниеОшибки()); 
        Возврат; 
    КонецПопытки; 
    
    GraphicsVK.ПолучитьИзображение(Имя);
    GraphicsVK.ИзменитьРазмерИзображения(100, 0, 0, Истина);
    GraphicsVK.СохранитьИзображение("C:\katalog\tmp.jpg", 1, 0, Ложь);
    
    ЭтаФорма.ВладелецФормы.ФайлПуть = Имя;
    ДД = Новый ДвоичныеДанные("C:\katalog\tmp.jpg");
    ЭтаФорма.ВладелецФормы.хрнКартинка = ПоместитьВоВременноеХранилище(ДД);
    Оповестить("возвратФайла");
КонецПроцедуры

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

Решение 3. Альтернативные способы отображения в интерфейсе

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

Колонка с типом «Поле HTML документа». В ячейку таблицы можно передавать короткий HTML-код со ссылкой на изображение и CSS-стилем object-fit: contain; width: 100%; height: 100%;. Встроенный браузерный движок формы корректно и плавно впишет картинку любого разрешения в границы строки.
Использование табличного документа. Если требуется создать интерфейс витрины или каталога с крупными карточками номенклатуры, табличный документ подходит значительно лучше стандартной таблицы формы. Объект Рисунок табличного документа штатно поддерживает свойство РазмерКартинки.Пропорционально и корректно масштабирует графику под любые заданные границы.
Вынесение превью за пределы таблицы. Наиболее эргономичный шаблон интерфейса 1С: в самой табличной части оставить только текстовые данные, а рядом расположить отдельное поле картинки, которое будет динамически обновляться при активизации текущей строки.