Часто в практике разработки на платформе 1С возникает необходимость вывести на форму документа сразу несколько изображений. Например, это могут быть фотографии товара, сканы прикрепленных договоров или галерея выполненных работ. При этом с одной картинкой сложностей обычно не возникает, но вывод нескольких, да еще и с возможностью их увеличения (превью), вызывает много вопросов.
Рассмотрим несколько эффективных способов решения этой задачи. Мы проанализируем как использование стандартных элементов формы, так и более гибкий подход с применением HTML и JavaScript.
Если вам нужно вывести картинки красиво, в виде ленты, и добавить эффект увеличения при наведении курсора, лучше всего использовать интеграцию с веб-технологиями. Разберем по шагам, как это реализовать.
Сначала мы создаем строковый реквизит формы, назовем его СтраницаHTML, и выводим его на форму. В свойствах элемента формы устанавливаем вид Поле HTML документа.
Далее программно формируем текст HTML-страницы. Чтобы реализовать эффект увеличения при наведении (hover-эффект), мы будем использовать CSS-стили. Посмотрим на пример кода формирования такой страницы:
СтраницаHTML = "
|<html>
|<head>
|<style>
| img {
| height: auto;
| width: auto;
| max-width: 640px; /* Максимальная ширина основного изображения */
| max-height: 640px; /* Максимальная высота основного изображения */
| }
| .scale {
| display: inline-block; /* Выстраиваем элементы в ряд (лентой) */
| overflow: hidden;
| margin: 5px;
| }
| .scale img {
| transition: 1s; /* Плавность эффекта увеличения */
| display: block;
| }
| .scale img:hover {
| transform: scale(2.0); /* Увеличиваем масштаб в 2 раза при наведении */
| }
|</style>
|</head>
|<body>
| <div class='scale'><img src='...путь к картинке 1...'></div>
| <div class='scale'><img src='...путь к картинке 2...'></div>
|</body>
|</html>";
Передача изображений без сохранения на диск: Чтобы не записывать файлы во временный каталог на жестком диске (что замедляет работу формы), передадим картинки прямо в HTML-код с помощью кодировки Base64. Для этого путь к картинке внутри тега IMG прописывается особым образом:
// Пример формирования тега с Base64
ТекстКартинки = "data:image/jpeg;base64," + Base64Строка(ДвоичныеДанныеКартинки);
СтрокаIMG = "<img src='" + ТекстКартинки + "'>";
Обработка нажатий: Если нужно не просто увеличить масштаб, а открыть полноразмерное изображение по клику, мы можем настроить обратную связь из HTML в 1С. В событии onclick тега изображения в HTML можно вызвать смену URL, например: window.location.href = 'mydata:image_id_123'. В модуле формы 1С в обработчике события ПриНажатии перехватываем этот URL, отменяем стандартный переход и программно открываем форму просмотра с выбранной картинкой.
Если применение HTML кажется избыточным, разберем чисто нативный способ 1С. Вместо того чтобы вручную добавлять 10-20 невидимых полей в конфигураторе, воспользуемся программным созданием.
Строка, который будет хранить адрес картинки во временном хранилище.ПолеКартинки и связываем его с созданным реквизитом.Этот подход позволяет выводить ровно столько полей, сколько картинок привязано к документу, оставляя интерфейс аккуратным. Для изучения готовой реализации подойдёт пример динамического программного создания и удаления элементов на форме.
Еще один удобный вариант — вывод картинок внутри Таблицы значений на форме. Проанализируем этот метод:
Мы добавляем на форму таблицу, убираем у нее шапку и линии сетки. Одной из колонок таблицы задаем вид ПолеКартинки. Изображения предварительно уменьшаем (создаем превью) и помещаем в эту колонку. В результате получается аккуратный вертикальный список или сетка изображений. Обработка клика здесь максимально проста: используется стандартное событие таблицы Выбор, где мы получаем текущую строку и открываем большую картинку. При необходимости программного построения такой таблицы можно использовать решение для программного вывода таблицы значений на управляемую форму.
При работе с галереями критически важно не загружать в форму оригиналы фотографий (особенно если они "весят" по 5-10 Мб). Разберем, как сжать фотографии средствами 1С:
Для современных версий платформы (начиная с 8.3.14): Используется встроенный объект ОбрабатываемаяКартинка. Он позволяет изменить размер изображения, обрезать его и снизить качество перед помещением на форму.
Картинка = Новый ОбрабатываемаяКартинка(ПутьКФайлу);
Картинка.УстановитьРазмер(200, 200);
Картинка.УстановитьПлотность(72);
Результат = Картинка.ПолучитьКартинку();
Для старых версий (например, 8.3.4): Встроенных средств недостаточно, поэтому можно использовать COM-объект WIA.ImageFile (Windows Image Acquisition) для изменения размера на лету.
В завершение поговорим о правильной архитектуре хранения. Выясним причину, почему нельзя хранить фото прямо в реквизитах документа: база данных быстро разрастется, и работа с документами станет медленной. Рассмотрим правильные подходы:
ХранилищеЗначения.Используя комбинированный подход из описанных выше методов, вы сможете создать быстрый, удобный и красивый интерфейс для работы с множеством изображений в документах 1С.